Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1160215

    Hi,
    Why does this happen? https://www.riverstonewines.com.au/product/test-product/ looks awful, could someone help me style this correctly so it looks normal. I want on the left if possible please, for some reason the sidebar is currently sitting under the image.

    Thank you

    #1160708

    Hey nzoasisfan,

    Please have a look at the following threads:
    https://kriesi.at/support/topic/sidebar-on-single-product-page-2/#post-294028
    https://kriesi.at/support/topic/single-image-problem/

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1160834

    Hi Victoria,

    This adds it to the left for me? I want the side bar on the left!

    Same code?

    #1161753

    Hi, Can someone help me with sidebar for the LEFT side

    Many thanks

    #1161773

    Hi,

    Thank you for the update.

    That is the default layout of the single product page — all widgets go under the featured image. You have to follow the instructions in the threads provided above if you want to change the default layout. Or post the login details in the private field so that we can apply the modifications.

    Best regards,
    Ismael

    #1161822

    Thank you, here is the page in question, as you can see the image hangs over the left sidebar for some reason

    I have filled in the private content

    #1162087

    Hi there,

    Any update on this?

    Many thanks

    #1162484

    Hi,

    Thank you for the update.

    We added this snippet in the functions.php file to adjust the structure of the product page.

    
    add_action('init','ava534345953_init', 50);
    function ava534345953_init() {
    	add_action( 'woocommerce_after_single_product_summary', 'avia_add_sidebar', 25);
    }
    
    function avia_close_image_div() {
    	global $avia_config;
    	echo "</div>
    ";
    }
    
    function avia_add_sidebar() {
    	if(is_product()) {
    	$avia_config['currently_viewing'] = "shop_single";
    	get_sidebar();
    	}
    }

    And this css code in the style.css file to alter the width of the containers.

    .single-product-main-image {
        width: 25%;
    }
    
    .single-product-summary {
        overflow: hidden;
        width: 45%;
        float: left;
        margin-right: 5%;
    }
    
    .single-product .sidebar {
        width: 25%;
    }
    

    Best regards,
    Ismael

    #1162486

    Thank you very much, but this has put it onto the Right sidebar, NOT the left sidebar which I wanted it on.

    COuld someone help me with the left sidebar please.

    #1162859

    Hi,

    NOT the left sidebar which I wanted it on.

    Thank you for the clarification.

    We adjusted the snippet in the functions.php file:

    #
    # wrap single product image in an extra div
    #
    add_action( 'woocommerce_before_single_product_summary', 'avia_add_image_div', 2);
    add_action( 'woocommerce_before_single_product_summary',  'avia_close_image_div', 20);
    function avia_add_image_div()
    {
    	echo "<div class='single-product-main-image'>";
    }
    
    function avia_close_image_div()
    {
    	echo "</div>";
    	global $avia_config;
    	$avia_config['currently_viewing'] = "shop_single";
    }
    
    #
    # wrap single product summary in an extra div
    #
    add_action( 'woocommerce_before_single_product_summary', 'avia_add_summary_div', 25);
    add_action( 'woocommerce_after_single_product_summary',  'avia_close_summary_div', 3);
    function avia_add_summary_div()
    {
    
    	echo "<div class='single-product-summary'>";
    }
    
    function avia_close_summary_div()
    {
    	echo "<div class='single-product-sidebar'>";
    	get_sidebar();
    	echo "</div>
    ";
    }
    

    And edited the css code to move the product sidebar to the left.

    .single-product .container .product {
      display: flex;
      flex-flow: row wrap;
    }
    
    #top #main .product .single-product-main-image {
      width: 30%;
      float: none;
      order: 2;
    }
    
    #top #main .product .single-product-summary {
      width: 30%;
      float: none;
      order: 3;
    }
    
    #top #main .product .single-product-sidebar {
      width: 20%;
      order: 1;
      flex: auto;
      margin-left: 0;
      border-left: 0;
      margin-right: 50px;
    }
    
    #top #main .product .single-product-sidebar .sidebar {
      border-left: 0;
      margin-left: 0;
    }
    

    Best regards,
    Ismael

    #1163256

    Thank you, much appreciated.

    Looks a little squished, is there a way to widen everything a little bit?

    #1163482

    Hi,

    You can increase the percentage of the width, but this will after not play good on other screen sizes.

    Best regards,
    Basilis

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.