Categories
Genesis Tutorials

Different Menu On WooCommerce Pages

This code works in any child theme function file and enables you to use a different menu when WooCommerce pages are loaded.

In this case we change the footer menu only when WooCommerce pages are displayed.

Installation Steps

Step 1 : Create a new menu named wc-products and add your WooCommerce menu items to this menu.

Step 2 : Copy & paste the PHP code to the end of your child themes functions file or custom functionality plugin.

Download Folder

Menu Setup

The menu location in the code equals secondary because the Genesis Sample child theme repositions the secondary menu from after header to footer location.

Swap out secondary in the code to match your footer location.

The default footer menu shown on all non WooCommerce pages is named footer.

See the image under the Code Explanation sub header on this page for more detail.

Prefer a 3rd menu? Try this solution.

Categories
Free Tutorials Genesis Tutorials

Remove Coupon From Cart Page – WooCommerce

There’s 2 ways to remove the coupon form from your WooCommerce cart page.

1. You can copy over the cart.php to your WooCommerce folder in your child theme and modify the code to remove the coupon from your cart page like this.

Or

2. Use CSS in your child themes style.css file.

.woocommerce-cart .coupon { 
    display: none !important; 
}
Categories
WordPress Tutorials

Remove Single Products From Shop Page Loop – WooCommerce

Need to hide one or more products from your shop page loop? There’s 2 steps involved.

  1. The input value for true or false
  2. Code to modify the default shop loop query

STEP 1 : There’s at least 3 ways to deal with the input.

1. You can use the default WordPress custom field meta box located on every Edit screen with the exclude_product custom field key and a value of 1 like this :

WordPress Custom Field Exclude Product Shop Page Loop

2. You can use a custom field plugin like ACF and import this json file to create a switch which displays on your Edit Product screen and looks like this :

3. You can hand code a meta box using the WooCommerce Meta Box Functions API which looks like this :

STEP 2 : Then there’s PHP code you need to modify the default shop page loop.

Download Folder

Installation

There’s only 1 step : Copy & paste the PHP code to the end of your child themes functions file or custom functionality plugin.

Note : There’s 3 code snippets in the download folder. If you’re using ACF or WordPress custom fields, only use the 3rd snippet. If you want to add the custom checkbox to the product Data section, use all 3 snippets.

Categories
WordPress Tutorials

Add Custom Product Meta To Archives – WooCommerce

This code adds product meta to your shop loop including :

  • Stock Status
  • Category
  • Custom Taxonomy Term

Installation

There’s only 1 step :

Copy & paste the PHP code from the functions.php file to the end of your child themes functions file or custom functionality or code snippets plugin.

Download Folder

Categories
WordPress Tutorials

Add Custom Field Content Before & After Products – WooCommerce

This PHP code enables you to add custom content before and/or after your WooCommerce products.

You can use this code to add any type of content including custom fields on your :

  • Single Product Page
  • Any Archive Page Type Using The Shop Loop

There’s 2 steps to adding custom field content. The input & the output.

  1. Step 1 – Input – Create a custom field using the custom fields box native to WordPress OR use a plugin like ACF.
  2.  
    Add Custom Fields WooCommerce Products

  3. Step 2 – Output – Add PHP code to your child themes functions file or custom functionality plugin to print your custom field content on the front end.

Single Product Page

Use this code to add content before your single product on the single product page.

Use this code to add content after your single product on the single product page.

Here’s the result on the single product page showing your custom field content added before and after the single product title :

Single Product Custom Fields

Shop Loop Archive Page Types

Use this code to add content before your single product on any shop loop archive page type.

Use this code to add content after your single product on any shop loop archive page type.

Here’s the result on shop loop pages showing your custom field content added before and after your product on the shop loop :

Shop Loop Custom Fields

Outside Shop Loop – Archive Page Types

You can also add custom fields before or after your product loop on taxonomy type archive pages.

There’s 2 steps :

  • Step 1 – Create a custom field named wc_taxonomy_custom_field
  • Step 2 – Add PHP code to your child themes functions file or custom functionality plugin.

Step 1 – Using a plugin like ACF, create a custom field named WooCommerce Taxonomy Custom Field using these settings :

acf-taxonomy-custom-field

Step 2 : Use this code in your child themes functions.php file to add content before and/or after your product taxonomy archive title on any taxonomy term archive page type.

Download Code

Here’s the result showing your custom field text displaying before the term archive page title.

woocommerce-custom-field-before-taxonomy-term-archive-page-title

Change the WooCommerce hook in the code to control where your custom field content shows before & after your single products.

Shop Loop Hooks

You can change the shop loop hooks to control where your custom field content displays on archive pages.

woocommerce_before_shop_loop_item
woocommerce_before_shop_loop_item_title
woocommerce_shop_loop_item_title
woocommerce_after_shop_loop_item_title
woocommerce_after_shop_loop_item

Archive Page Hooks Outside Shop Loop

You can change the hooks to control where your custom field content displays on archive pages outside your shop loop.

woocommerce_before_main_content
woocommerce_archive_description
woocommerce_before_shop_loop
woocommerce_after_shop_loop
woocommerce_after_main_content

Related Code

Categories
Free Tutorials WordPress Tutorials

Submit Button Notice for Product Reviews – WooCommerce

Using a code editor, copy & paste the PHP code from the view raw link in the Gist to the end of your child themes functions file or custom functionality plugin.

Review Form Hooks

Using the comment form hooks native to WordPress, these are the hooks you can use to position your text for single product reviews:

comment_form_before
comment_form_top
comment_form
comment_form_after

Hook Positioning

Shows the exact position in the comment form the hook will output.

WooCommerce Single Product Review Form Hooks

About The Code

  • Uses the comment_form_after hook to control the positioning of the text beside the submit reviews button
  • Uses the is_product() conditional tag to print the output on single product pages only
  • Uses the esc_html_e function to print translated text that has been escaped for safe use in HTML output

Text Line Height – CSS

You can then add some CSS to the end of your child themes style sheet to position your text.

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

.single-product .comment-form .submit-reviews-notice {
        line-height: 2.2;
}}

And here’s the result displaying vertically inline with the submit button.

Related Code Snippets

Categories
Free Tutorials WordPress Tutorials

Remove Current Single Product From Shortcode Products – WooCommerce

Add to the end of your child themes functions.php file or custom functionality plugin.

The gallery shows the green colored single product 9 included in the product shortcodes list on the left and removed on the right to avoid duplicate products displaying on the same single product page in WooCommerce.

Categories
WordPress Tutorials

Custom WC Product Title On Orders for Checkout, PayPal, Credit Card & Email Order Receipts

The code in this download folder adds a custom field to the WooCommerce Product Data meta box on the Single Product edit screen. This field enables you to add a 2nd product title which is only displayed on the checkout, my account > orders, email receipts for PayPal & credit card payments as well as order confirmation emails as seen in the demo video below.

No plugins are required when using this code to hide the real name of the product or service you are purchasing.

The real name for your product still appears on the single product page, shop page and other archive page types in WooCommerce but is changed once you complete the order. The order number stays the same for future reference and tracking.

Payment Gateways Email Notifications

This is how your custom product name will appear on payment gateway emails like PayPal, Stripe credits cards etc for the seller:

And for the buyer :

Demo Video

Shows Product 1 which is the real name of the product title changed to Special Product Title which is displayed at the checkout, under My Account Orders and on email order confirmations.

Tested using WooCommerce, Genesis Sample and custom code from the download folder.

Installation

There’s only 2 steps :

1. Copy the PHP code from the functions.php file to the end of your child themes functions file or custom functionality plugin.

2. Upload the woocommerce folder to your child theme folder.

Download Folder

Related Products

Categories
WordPress Tutorials

Open External/Affiliate Product Links In New Window – WooCommerce

The solutions in these 2 download folders provide 3 different methods which enable you to open external links in new windows without modifying the code in the core WooCommerce files.

Once you have added your external link to your Product Data > External/Affiliate product > General > Product URL, you can follow the installation guide and your single & archive product links on all page types will open in new windows as seen in the following demo videos.

Demo Video

Shows both the archive & single product Add To Cart buttons opening in new windows when using Genesis & Twenty Twenty Two in the 2nd video.

Tested using the Twenty Twenty Two default theme for WordPress & the Genesis Sample child theme by StudioPress.

Installation – Method 1

There’s only 1 step :

Download Folder – Method 1

Related WooCommerce Code

Categories
Genesis Tutorials WordPress Tutorials

Add Brand Custom Taxonomy To WooCommerce Products Shortcode

The code in this download folder enables you to create a custom taxonomy named Brand which is added to the default WooCommerce Products admin menu like this:

The screenshot shows a admin link added to the WC Products menu in your WordPress Dashboard. Once clicked, you can add brand names and then assign them to single products.

You can create your brands on the Brands admin page or directly on the single Edit Product page like this :

The download folder also includes :

  • Code to create a custom class attribute for use with the default WooCommerce products shortcode
  • Code to remove “Out of Stock: Products from your products list
    Code to display your shortcodes in any hook or template file position.

Demo Video

Shows the custom products grid displaying before the single product summary when products have been assigned to a brand and are in stock. When “out of stock” and/or not assigned to a brand, products will not display in the grid.

Tested using the Twenty Twenty default theme for WordPress & the Genesis Sample theme by StudioPress.

Installation

Copy & paste the PHP code ( without the opening PHP tag ) to the end of your child themes functions file or custom functionality ( code snippets ) plugin, then go to your WordPress Dashboard > Settings > Permalinks & resave your permalinks.

You can then edit the product shortcode to add your brand names.

Download Folder

Shortcodes

Once you have installed the code, you can use the custom function from the download folder to display your products or the following shortcode in a HTML widget.

[products limit="4" columns="4" class="brand,Nike,Apple,Demo,outofstock"]

Edit this shortcode to include a comma separated list of the brands you want shown.

Related WooCommerce Code Snippets

Categories
Genesis Tutorials

3 Ways To Exclude Products From WooCommerce Related Products

This download folder contains 3 code snippets which enable you to exclude or remove WooCommerce products from your Related Products list. You can exclude by :

  1. Product ID
  2. Category Slug
  3. Key

You might want to use this code to remove “Out of Stock” products from your related products list unless you’re offering them on back order.

What Are Related Products

Related Products are products that share the same tags or categories as the current product. They are not the same as “Up-Sells” or “Cross Sells” which you add manually in Product Data – Linked Products.

Installation

Copy & paste ( without the opening PHP tag ) one or more of the snippets to the end of your child themes functions file or custom functionality plugin.

Download Folder

Bonus

A 4th method has been tested and added to the latest download folder.

Related Code Snippets

Categories
Genesis Tutorials

Add WooCommerce Cart To Nav Menu Widget In Genesis

This code adds the WooCommerce cart icon with the total amount of items and price to a navigation widget in the before header utility bar.

Requires the activation of both the WooCommerce & Genesis Connect for WooCommerce plugins.

Demo Video

Shows the WooCommerce Cart Total Added to the Navigation Menu widget in the before header utility bar.

Tested using the Parallax Pro child theme by StudioPress however will work in other Genesis child themes where some modification of the CSS might be needed.

Installation Steps

  1. # Copy & paste the PHP code ( without the opening PHP tag ) to the end of your child themes functions.php file.
  2.  

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

  5. # Create a new menu named before-header without the need to add any menu items like this:
  6.  

  7. # Add widgets to the Before Header widget area including the Navigation Menu widget selecting the before-header menu as seen in the following screenshot and demo video.
  8.  

Download Folder

Related Tutorials

Categories
WordPress Tutorials

Show a Message at The Top of Your Page For New Site Visitors Using a Cookie

The code in this download folder enables you to conditionally display a message before your sites header like this :

In this case, the message is displayed every 7 days however you can :

  • Set the cookie to display the message to new site visitors once every X amount of days
  • Conditionally display the message on specific posts and/or page types using WordPress conditional tags.

In this case the message only displays on WooCommerce single product pages.

Demo Video

Shows a message at the very top of pages which when hidden will only display based on the cookie setting which is set to 7 days.

Tested using the Twenty Twenty default theme for WordPress however will work in any theme.

Installation Steps

This solution is coded to work with the Twenty Twenty default theme for WordPress. If using Twenty Twenty, there’s only 1 installation step. Install the zipped folder named twentytwenty-child as a new theme and you’re good to go.

Note : You may need to reactivate the Twenty Twenty parent theme first and then activate the child theme to get the parent themes stylesheet to load.

Otherwise, if you’re using a different theme or already have a child theme installed, follow these 3 simple steps :

  1. # Upload the file named top-banner.js to your child theme folder.
  2.  

  3. # Copy & paste the PHP code ( without the opening PHP tag ) to the end of your child theme functions.php file
  4.  

  5. # Copy & paste the CSS to the end of your child themes style.css file and clear caching.
  6.  

Display Location

To change the location of where your message displays, simply change the conditional tags on lines 18, 33 and 51 in functions.php

Change Cookie Expiry

To change the cookie expiry from the default 7 days, change the value for the expires option from 7 on line 65 in top-banner.js

Download folder

Categories
WordPress Tutorials

If WooCommerce Product Out Of Stock, Show Widget

This code enables you to display a widget area if your single product is out of stock. You can display the widget in any WooCommerce single product page hook position.

In this example, we’ll use the the woocommerce_before_single_product hook.

Here’s the code you can add copy ( without the opening PHP tag ) to your child themes functions.php file.

Note : You will need to swap out both instances of the text-domain with the text-domain for your theme. You can find the text domain in your style.css file header.

In this example, the text-domain should be changed to genesis-sample. However, the PHP code will work in any WordPress theme and is NOT coded with Genesis widget functions.

Download Folder

Categories
WordPress Tutorials

Custom Role To Allow Users To Submit WooCommerce Products For Review

This code adds a custom role for vendors/product contributors so admins can review new products submitted for review prior to publishing.

The code also enables you to set custom capabilities providing the site owner control over what can be accessed, edited, read and deleted similar to the default contributor role in WordPress.

Vendor User

Demo Video

Shows how to create a new user withe the vendor role enabling user submitted wooCommerce products that can be reviewed by admins before publishing.

Installation Steps

There’s 2 steps :

  1. # Copy the PHP code from functions.php ( without the opening PHP tag ) to the end of your child themes functions file.
  2.  

    Step 1

  3. # Create a new user and select the Vendor role like you see in the demo video.
  4.  

    Step 2

Note : Once you have installed the code, you m ay need to switch to another theme and then switch back as the code uses the switch_theme hook.

Download Folder

Categories
Genesis Tutorials

Make WooCommerce Product Archives Look Like Essence Pro Archives

The solution in this tutorial shows you how to style your WooCommerce product archives like the 2 column archive pages in Essence Pro.

In this example, the product category displays products in 2 columns and is styled like the default post category archive in Essence Pro.

Demo Video #

Shows the WooCommerce product category page styled like the default post category page in the Essence Pro child theme by StudioPress.

Installation Steps #

There’s 2 steps :

Step 1 – Copy & paste the PHP code from the download folder to the end of the Essence Pro themes functions.php file.

Step 2 – Copy & paste the following CSS to the end of the Essence Pro themes style.css file and clear caching.

Related Tutorials

Categories
Free Tutorials Genesis Tutorials

Modify Or Remove Address & Checkout Fields On WooCommerce Checkout Page

This freely accessible download folder contains 2 code snippets which enable you to :

Use the 1st snippet to make the following address fields optional rather than compulsory :

  • country
  • address_1
  • address_2
  • company
  • required
  • state
  • postcode

Use the 2nd snippet to completely remove the following fields :

  • billing_first_name
  • billing_last_name
  • billing_company
  • billing_address_1
  • billing_address_2
  • billing_city
  • billing_postcode
  • billing_country
  • billing_state
  • billing_phone
  • order_comments

Code Installation – From Download Folder #

Add the code to the end of your child themes functions.php file.

Categories
Free Tutorials Genesis Tutorials

WooCommerce Product Categories Widget – Change The Order Of Categories

This free code enables you to change the order of your categories displayed using the WooCommerce Product Categories widget.

On your WooCommerce > Products > Categories admin page, you can change the order of categories on the front-end using drag and drop to sort them.

add_filter( 'woocommerce_product_categories_widget_args'

Using the following code in your child themes functions file, you can change the default order.

Download Code – Free

Tested using the Genesis Sample child theme by StudioPress with the Genesis WooCommerce Connect plugin.

You can learn more about this hook in wp-content > plugins > woocommerce > includes > widgets > class-wc-widget-product-categories.php

The hook used in this function enables you to filter the wp_list_categories arguments used to display your product categories in the WooCommerce Product Categories widget.

You could also use the wp_list_categories hook ( Untested ) like this :


add_filter('wp_list_categories','modify_wooc_product_categories_order');

function modify_wooc_product_categories_order($output) {

// Add your modified arguments here

   return $output;
}
Categories
Genesis Tutorials

WooCommerce Front Page Template For Genesis

This template enables you to create a front page like this :

WooCommerce-Front-Page-Template-For-Genesis

The template includes 4 widget areas for displaying WooCommerce products using the products shortcode

In this case, shortcodes are added to a custom HTML widget in each widget area like this :

The shortcodes enable you to set the amount of products, number of columns and the category the products are assigned to. There are many other product attributes you can use to control which products are displayed in each widget area.

Watch the following demo video to see how it works :

Demo Video #

Shows products displaying in 3 columns by category in each widget area on the front page of the Genesis Sample child theme by StudioPress.

Code Installation #

The code comes pre-installed in the Genesis Sample child theme included in the following download folder for logged in users. To use this theme as is, install the zip folder named genesis-sample.zip from the download as a new theme.

Instructions are also included to use the template in other child themes.

Download Folder

Requirements

  1. Requires the installation of both the WooCommerce and Genesis Connect WooCommerce plugins.

  2. Once you setup WooCommerce and create your products, you can then add shortcodes to custom HTML widgets in any of the Product Category widget areas.

Usage In Other Themes

The download folder includes a zip file named genesis-sample.zip which you can install as a child theme withe template pre-installed. If you want to use the code in another theme, following these instructions :

Step 1 – Upload the front-page.php file to your child themes root directory.

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

Step 3 – In the config > menus.php file, rename the secondary menu to Category Menu or any other name you want to use.

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

Product Category Menu

Is made like this :

Categories
Genesis Tutorials

Custom WooCommerce Shop Page Template For Genesis

This template enables you to display your product titles before your product images and the product price and buy button inline with the image like this :

woocommerce-shop-page-template-genesis

You can also display the shopping cart total in the nav menu using the code from this tutorial

Demo Video #

In this case, the shop page is displayed as the front page using the Reading Settings.

Tested using the Genesis Sample child theme for Genesis however should work fine in most Genesis child themes.

Code Installation #

There’s 3 steps relating to usage of the files inside the download folder :

Step 1 – Upload the woocommerce folder to your child themes root directory.

Step 2 – Create a new page and select it as the home page using the WordPress Reading settings :

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

Download Folder

Related Templates