How to add sidebar on single product page


#1

Hello,

How can I add sidebar on single product page please?

Thank you


#2

Hello there,

It’s disabled in the Leto theme. To enable it, add this function to your child theme’s functions.php file or you can use a functionality plugin like Code Snippets.

    add_action( 'wp', 'leto_child_woocommerce_actions', 9999 );
    function leto_child_woocommerce_actions() {

      if( is_single() ) {
        add_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar' );
      }

    } 

Then add the below CSS code to Appearance > Customize > Additional CSS from dashboard.

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

      .woocommerce.single-product .content-area,
      .woocommerce .single-product .content-area {
        width: 75% !important;
      }

      .woocommerce.single-product .product-detail .col-md-6,
      .woocommerce.single-product .product-detail .col-md-1,
      .woocommerce.single-product .product-detail .col-md-5,
      .woocommerce .single-product .product-detail .col-md-6,
      .woocommerce .single-product .product-detail .col-md-1,
      .woocommerce .single-product .product-detail .col-md-5 {
        width: 100%;
      }

    }

Regards,
Kharis


#3

Thank you, it is working.

But I would like to adjust few more things on this.

http://nufak.sk/produkt/cibau-dog-adult-medium-25-kg/

I want to Title to be over picture and I want to make that gap between sidebar and product little bigger, is this possible?

Thank you


#4

Hello there,

To enlarge the space between sidebar and product content area, try replacing the below code block:

    .woocommerce.single-product .content-area,
    .woocommerce .single-product .content-area {
      width: 75% !important;
    }

with:

    .woocommerce.single-product .content-area,
    .woocommerce .single-product .content-area {
      width: calc(75% - 15px) !important;
      width: -moz-calc(75% - 15px) !important;
      width: -webkit-calc(75% - 15px) !important;
    }

    .woocommerce.single-product .widget-area.col-md-3,
    .woocommerce .single-product .widget-area.col-md-3 {
      width: calc(25% - 15px);
      width: -moz-calc(25% - 15px);
      width: -webkit-calc(25% - 15px);
    }

To move the title position to the top, try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    (function($){

      if( $('body.single-product').length ) {

        var title = $('.product_title');

        if( title.length ) {
          title.remove().clone().prependTo('.product-detail > .row');
        }

      }

    })(jQuery);
  1. Update

Regards,
Kharis