drawcard

So, you know how to override a template file in Woocommerce using Sage, but you're having trouble changing something within the deeper level of that template file. For example, you want to change the output HTML structure of a given part of the product page loop, or incorporate a Bootstrap class into a button element without using Jquery to inject it. Here's how you can override deeper level parts, the default WC theme elements.

Prerequisites

• Check out the info on how template overriding works in Woocommerce before you begin.
• Also check out how to set up Sage Templates & Woocommerce
• Install Roots Wrapper Toolbar to preserve your sanity!

Now you're familiar with how to do Sage + Woocommerce templates, it's time to make it happen.

The template page override

jawinn

<?php 
/**
 * Get the Yoast primary category from its post meta value, and displays it, with HTML markup.
 * If there is no primary category set, it displays the first assigned category.
 * 
 * @param boolean $useCatLink Whether to link the category, if it exists
 * @return void
 */
function yourtheme_display_yoast_primary_category( $useCatLink = true ) {

llgruff

<?php
/**
 * Remove [All in One SEO Pack] HTML Comments
 * @link //gist.github.com/llgruff/a7ab776167aa0ed307ec445df54e5fdb
 */
if (defined('AIOSEOP_VERSION')) {
	add_action('get_header', function() {
		ob_start(
			function($o) {
				return preg_replace('/\n?<.*?One SEO Pack.*?>/mi','',$o);

sewmyheadon

# -----------------------------------------------------------------
# .gitignore for WordPress                             ver 20161009
# -----------------------------------------------------------------
#
# This file:
# • is for WordPress sites using the default file/folder structure,
# • specifies which files are tracked/untracked by git. 
#
# .gitignore docs:
# https://git-scm.com/docs/gitignore

SteveJonesDev

<div class="menu-container">
    <button class="menu-button" aria-expanded="false" aria-controls="site-header-menu" aria-label="<?php esc_attr_e( 'Menu', 'textdomain' ); ?>"></button>
    <div id="site-header-menu" class="site-header-menu">
        <?php
        wp_nav_menu(
            array(
                'theme_location'       => 'primary',
                'container'            => 'nav',
                'container_class'      => 'main-navigation',
                'container_id'         => 'site-navigation',