Enfold Sidebar on single product pages - Support | Kriesi.at

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

Author

Posts
November 26, 2019 at 8:00 am #1160215

nzoasisfan
Participant

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

November 27, 2019 at 5:18 pm #1160708

Victoria
Inactive Moderator

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

November 27, 2019 at 11:50 pm #1160834

nzoasisfan
Participant

Hi Victoria,

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

Same code?

December 2, 2019 at 7:09 am #1161753

nzoasisfan
Participant

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

Many thanks

December 2, 2019 at 9:05 am #1161773

Ismael
Moderator

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

December 2, 2019 at 12:17 pm #1161822

nzoasisfan
Participant

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

Test product

I have filled in the private content

December 3, 2019 at 7:39 am #1162087

nzoasisfan
Participant

Hi there,

Any update on this?

Many thanks

December 4, 2019 at 8:19 am #1162484
Ismael
Moderator
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
December 4, 2019 at 8:37 am #1162486

nzoasisfan
Participant

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.

December 5, 2019 at 10:22 am #1162859
Ismael
Moderator
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
December 6, 2019 at 12:34 am #1163256

nzoasisfan
Participant

Thank you, much appreciated.

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

December 6, 2019 at 10:41 pm #1163482

Basilis
Inactive Moderator

Hi,

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

Best regards,
Basilis

December 1, 2022 at 1:32 am #1374540
pixelboy1
Participant
Hi,

I realise this is an old post but for the benefit of anyone who has Googled this topic and are using Ismael’s first solution for a right sidebar (post-1162484), there’s a slight code tweak required if you find that the default sidebar is being loaded instead of your ‘Single Product Pages’ sidebar:

‘global $avia_config;’ must be added to the ‘avia_add_sidebar()’ function. So revised code is as follows:
```
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() {
  global $avia_config;
  if(is_product()) {
    $avia_config['currently_viewing'] = 'shop_single';
    get_sidebar();
  }
}
```
Ismael’s CSS code remains unchanged:
```
.single-product-main-image {
    width: 25%;
}

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

.single-product .sidebar {
    width: 25%;
}
```
December 1, 2022 at 12:16 pm #1374588

Rikard
Keymaster

Hi,

Thanks for sharing @pixelboy1 :-)

Best regards,
Rikard
Author

Posts

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

You must be logged in to reply to this topic.