How to add sidebar on single product page

Hello,

How can I add sidebar on single product page please?

Thank you

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

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

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