WP SITES

2617

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

Custom WooCommerce Product Page Archive Template For Genesis

This template enables you to fully customize the WooCommerce product/shop page in any Genesis child theme.

Customization includes :

  • Display products anywhere between 2 – 6 responsive columns.
  • Change the Add To Cart button text.
  • Add custom placeholder product image named product.jpg to images folder
  • Show rating stars even when no rating
  • Add unique content from custom fields after the price of each product

The code also adds a custom field named After Price to the Edit Product > Product Data > General tab which enables you to add unique content after the price for each product :

Products display equal height regardless of how much or less product data is added :

#Demo Video

Shows products displaying equal height regardless of how much product data is added to different products. Shows the mobile responsiveness of the product grid.

Note : You can use this template on any WooCommerce archive page type in any Genesis child theme. Tested using the Genesis Sample child theme by StudioPress.

Register or login to access the download folder :

Download Folder

#Installation

There’s 3 steps relating to the files in the download folder :

Step 1 : Upload the folder named woocommerce to the child themes root directory.

Step 2 : Copy & paste the PHP code from the functions.php file to the end of your child themes functions file.

Step 3 : Copy & paste the CSS from the style.css file to the end of your child themes style sheet and clear caching.

Single Column on Small Screens #

Use CSS like this to display products in a single column on small screens :

@media only screen and (max-width: 600px) {

woocommerce-shop-page ul.products li.product {
    width: 100%!important;
    float: none;
}

}

Or you can use PHP code in your child themes functions file to entirely remove the small screen CSS optimization.

Related Templates

Reader Interactions

Leave a Reply