Woo Code Snippets

Quick reference sheet for WooCommerce code snippets. Before making use of any snippets, make sure you read the "Snippet Placement" section below.

Snippet Placement

The Theme Customizations Plugin

We use GD Core to house our theme, plugins and main WordPress components. GD core takes on the functionality of a child theme, so we don't actually get a child theme to work within if we wanted to add custom php to the site. In the case that we need a child theme or a place to put custom php, we can install the "Theme Customizations Plugin" - A handy little plugin to contain your theme/plugin customisation snippets.

This is a very clean, extremely basic plugin that doesn't require any updates. It keeps all of your changes in one location, independent of the other components that make up your web site. That means you can safely perform theme / plugin updates without the worry of losing your modifications as well as easily deactivating your customisations to check for conflicts. This plugin doesn't actually do anything on its own. It is purely a convenient place for you to store your own theme/plugin customisations.

How to set things up

  • 1

    Go to: https://github.com/woocommerce/theme-customisations

  • 2

    Click "Clone or Download" then "Download ZIP"

    it should be called "theme-customisations-master.zip"

  • 3

    Go to dashbaord > plugins > add new > click "Upload Plugin"

    upload the "theme-customisations-master.zip" > click to install it > then activate it

  • 4

    Once active, go to dashbaord > plugins > plugin editor

    it may let you know of the risk of editing plugins, check the "I Understand" box and proceed

  • 5

    On the "Edit Plugins" screen > click the dropdown called "Select plugin to edit" > choose "Theme Customisations" > click "Select"

    it is VERY IMPORTANT that you make sure you're editing the "Theme Customisations" plugin and not any other plugin

  • 6

    From the "Plugin Files" sidebar to the right, click the "custom" dropdown arrow

  • 7

    You should see three items listed under the custom dropdown: custom.js, functions.php and style.css

    Beaver Builder customizer already includes a "Code" panel for custom JS and "Additional CSS" panel for custom CSS, so those two items will not be used here. We will only make use of the functions.php file for adding PHP snippets.

  • 8

    Click the "functions.php" file > add your snippet to the selected file content area under the comment that says "Add PHP snippets here"

    NOTE: If you add a snippet that's missing something, usually you'll get a warning telling you to fix the mistake when you click the "Update File" button. Sometimes a snippet will be accurate so you won't get the warning and it will publish but it may clash with something else and break the site. If that's the case, you will have to FTP in and manually delete the snippet from the page using your FTP client.

Frontend Snippets

Source: WooCommerce Codex - Snippets Archives | Frontend Snippets 

General Snippets

Source: WooCommerce Codex - Snippets Archives | General Snippets 

Theming Snippets

Source: WooCommerce Codex - Snippets Archives | Theming Snippets 

Table of Contents
    Add a header to begin generating the table of contents