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

WP SITES

2665

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

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

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems