Some of you are aware that I LOVE Divi Theme from Elegant Themes but one of the things that has been frustrating me is not being able to personalise the archive pages on my Woocommerce product category pages. Well I solved it with no plugins pieced together from bits all over the web. So how did I do it?
Here is the step by step tutorial on the video as I show you all the steps:
So what were they again? and what were the magic bits I pasted in?
Here is the quick reference guide:
Create Your Layout
In your WordPress dashboard go to Divi > Divi Library
Add a new layout
Set this layout to Global (you have to do this when making it as it is not changable to global later)
Copy Woocommerce template files to your theme
in wp-content > plugins > woocommerce > templates
copy these to your theme (highly recommend using a child theme for this) in a folder called “woocommerce” (CTRL drag in cpanel)
Change template file names in your theme
find your slug of your product category
use the rename function to rename both of the files to add “-yourslug” before the .php
So “archive-product.php” becomes “archive-product-yourslug.php”
and “taxonomy-product_cat.php” becomes “taxonomy-product_cat-yourslug.php”
Edit the code of this file and change the line “wc-get-template(‘archive-product.php’);”
Change it to “wc-get-template(‘archive-product-yourslug.php’);”
Remove everything after “get_header( ‘shop’ );” all the way down to and leave in ” get_footer( ‘shop’ ); ?>”
Between those 2 lines past in
Change the XXXX to the layout number (found by looking in the URL when viewing the layout editor screen
To update the layout you then just go back into Divi > Divi Library and make your changes!!
The Divi theme makes it super easy to add a full width slider to your WordPress pages.
In this video from Divi Nation Mak expains how to use CSS to make the images the button! What yes by applying this CSS to the module the button becomes the size of the full image and disappears leaving your beautiful image that is clickable as a link with no visable button! How does it get any better than this?
Below the video you will find the full CSS code required for this hack.
One of my favorite shopping carts is Woocommerce and often I am creating a pretty sales page that differs from the Woocommerce Product Page. So what happens when you get to the BUY NOW button?
Do you really want them to have to link to the product page and then click again to add to cart? There is another way!
Woocommerce has built in a really cute little addition to your URL that can auto add a product and then take them straight to the cart or checkout page to continue to checkout. How does it get any easier than that?
Find out your Cart Page or Checkout Page URL
Find the ID number of the product you wish to add to the cart
In the admin / back-end of the website got to the Products page
Hover over the product you wish to use
The ID number that appears below the product name is the number you require (see image with the ID highlighted in Yellow)
Combine these from 1 & 2 to create the URL eg: www.yourdomain.com/checkout/?add-to-cart=769 This will take the person to the checkout page with product 769 already added to the cart.
So you have a desire to take orders and allow people to pay later?
Maybe you are using Woocommerce shopping cart to take registrations for event and wish for people to register online and pay later closer to the time.
So this is what I did with a couple of notes you may wish to take note of:
1. Create a custom payment gateway. You may know how to do this by coding or you may choose to add a plugin to do this. I used the free version of Booster For Woocommerce (it has a pig on a rocket!) the following instructions are how to set this up:
In your sidebar select Woocommerce -> Settings and then choose the Checkout tab at the top.
a new section is added across the top called “Custom Gateway #1” select this.
Check the checkbox beside “Enable Custom Payment” to enable this payment gateway.
Edit settings as you desire
Set “Default Order Status” to “Pending Payment”
2. On the “Products” tab select “Inventory” and Check the number of minutes in the “Hold Stock (minutes)”, this is number of minutes defines how long it will allow an order to set in payment pending. If left on the standard 60 minutes people will only have 60 minutes to pay otherwise the order will be cancelled. I use 525960 minutes which is a year.