• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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

  • Genesis Child Theme Template For Custom WooCommerce Shop Page
  • Custom WooCommerce Single Product Page Template For Genesis

WooCommerce

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.