Home › Forums › Pro Themes › Easy Commerce Pro › How to Change Product Columns from 3 to 4
Tagged: columns, font type, font-size, product page
- This topic has 8 replies, 2 voices, and was last updated 7 years, 4 months ago by
wensolutions.
-
AuthorPosts
-
October 11, 2017 at 9:45 am #55432
Maria Hilton
ParticipantHi, I currently have 3 columns of products in my theme but would like 4. Can I adjust this? Example page is here: https://hipnippers.mystagingwebsite.com/product-category/dresses/
October 11, 2017 at 10:34 am #55439Maria Hilton
ParticipantAnd, how do I change the font size & type on my product titles please?
October 12, 2017 at 12:26 am #55491wensolutions
KeymasterHello @hipnippers,
To adjust the column of the WooCommerce shop page you have to activate the child theme .
You can even activate the child theme using the plugin given below :
https://wordpress.org/plugins/wp-child-theme-generator/
After activating the child theme in your child theme functions.php paste below given code .
add_filter('loop_shop_columns', 'easy_commerce_pro_loop_columns', 20); if (!function_exists('easy_commerce_pro_loop_columns')) { function easy_commerce_pro_loop_columns() { return 4; } }
Then paste below given CSS by going to Admin Panel > Appearance > Customize > Additional CSS .
@media only screen and (max-width: 767px) { .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width: 48.2%; clear: both; } } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { margin: 0 1.8% 15px 0; width: 23%; }
Now to change the font size and font type paste below given CSS in the location Additional CSS .
.woocommerce ul.products li.product .woocommerce-loop-product__title, .easy-commerce-woocommerce ul.products li.product h2 { font-size: 22px; font-family: cursive; }
You can ajust the font size and font family as per your requirement .
Hope this helps .
Best Regards!!
October 12, 2017 at 3:06 pm #55566Maria Hilton
ParticipantGreat, thank you. Do you know why the products don’t show evenly on the last row e.g. if you look at this page: https://hipnippers.mystagingwebsite.com/product-category/bibs/, there are a number of bib pages but there are gaps at the end of the page and you’ve to go onto the next page to see more products.
I’ve also noticed that when you then click into a product that the product title then looks very small. Is it possible to make that font different/bigger on the actual product page.
October 12, 2017 at 3:07 pm #55567Maria Hilton
ParticipantAlso, is it possible to change the product columns to 5 or is 4 the maximum?
October 12, 2017 at 4:17 pm #55571Maria Hilton
ParticipantAnother question – how to I change the button text from “Read More” to “Add to Basket”?
October 13, 2017 at 1:53 am #55610wensolutions
KeymasterHello @hipnippers,
Your quires has been answered below :
Issue #1
The no of the product that is displayed in the product page can be controlled . For this you need to go to Admin Panel > Settings > Reading > Blog page to show at most . From here set the no of product in such way that there does not remain any space at the bottom .
Issue #2
To increase the font size of the product title in single page use below given CSS.
.single.woocommerce div.product .product_title { font-size: 35px; }
Issue #3
Yes you can definitely change the no. of column to 5 For this replace above given code with the code given below .
add_filter('loop_shop_columns', 'easy_commerce_pro_loop_columns', 20); if (!function_exists('easy_commerce_pro_loop_columns')) { function easy_commerce_pro_loop_columns() { return 5; } }
Also paste below given CSS in Additional CSS.
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product { margin: 0 1.8% 15px 0; width: 18.05%; }
Issue #3
To change the button text from “Read More” to “Add to Basket” paste below given code in your child theme functions.php .
add_filter( 'woocommerce_product_add_to_cart_text', 'woo_custom_cart_button_text' ); function woo_custom_cart_button_text() { return __( 'Add to Basket', 'woocommerce' ); }
Hope this helps .
Best Regards!!
October 13, 2017 at 10:22 am #55652Maria Hilton
ParticipantBrilliant, this is fab. Thank you!
October 15, 2017 at 2:30 am #55734wensolutions
KeymasterHello @hipnippers,
Glad we could help you !!
If you have any issues further, please feel free to post your queries and we will happily help you further.
We will really appreciate if you could help us too by rating our theme in WordPress repo here:-
https://wordpress.org/support/theme/easy-commerce/reviews/
Best regards !!
-
AuthorPosts
- You must be logged in to reply to this topic.