Friday, 14 June 2013

Custom sidebar for single product view in Genesis / WooCommerce

single_product_view_custom_sidebar_genesis_woo_commerce

While working on a client site. He offered me to create a separate sidebar for a single product view in genesis. He wanted to load different widgets when single product is viewed. The tool used on the site for shopping cart was "WooCommerce"

First I went to the plugin and open it in editor and hard coded the sidebar which I registered in the functions.php


Later on I thought that this is not a good idea to do this. because with the newer version of Woo Commerce all the changes will be lost. Then I took use of the WooCommerce Actions Hooks in template and Hooked into the content-single-product.php

This template is responsible of showing content on the single-product.phpi took use of the hook


woocommerce_after_single_product

and did the following..

Step 1 : Register New Widget area for Custom Sidebar

add this code in functions.php to create a new widget area for product view page.


// NEW WIDGET AREA FOR SINGLE PRODUCT VIEW
if ( function_exists('register_sidebar') )
 register_sidebar(array('name'=>'Single Product Sidebar',
  'before_widget' => '<div class="widget-wrap">',
  'after_widget' => '</div>',
  'id' => 'product_sidebar',
  'description' => 'Widgets in this area will be shown on the single product view page only.',
  'before_title' => '<h4 class="widgettitle">',
  'after_title' => '</h4>',
));


Step 2 : removing default sidebar & adding Custom sidebar with Hooks.

add this code in functions.php to remove default sidebar and add the above sidebar in that place.


// content-single-product.php HOOK to get into the page to add single product sidebar.
add_action('woocommerce_after_single_product', 'single_product_sidebar_hook');
function single_product_sidebar_hook() { ?>
  <?php remove_action('genesis_sidebar', 'genesis_do_sidebar'); ?>
  <?php add_action('genesis_sidebar', 'genesis_single_product_sidebar');
            function genesis_single_product_sidebar() { ?>
                <?php // SINGLE PRODUCT VIEW SIDEBAR
                    if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Product_Sidebar') ) : ?>
                <?php endif; ?>
   <?php } ?>
<?php }



Please share your experience in comments below..

No comments:

Post a Comment