Return to previous page

Sidebar Position single product page - by kumapanda

This topic has 10 replies, 2 voices, and was last updated 7 years, 7 months ago ago by Olga Barlow

kumapanda

Participant

September 20, 2016 at 16:58

Hi there.

I know I can disable the product diebar on mobile but I think upselling products are important on mobile too.

The problem is, that the sidebar is stacking over the woocommerce product tabs. I think it should move below that:
https://www.8theme.com/demo/xstore/shop/man/shirts/classic-shirt/

BEST!

#140224 Copied

9 Answers

Olga Barlow

Support staff

September 21, 2016 at 08:35

Hello,

Unfortunately, there is no way to move sidebar below the product tabs and keep tabs full width. But you can change position of upsell products http://prntscr.com/ckise0

Regards

#140265 Copied

kumapanda

Participant

September 21, 2016 at 11:57

I know this option. But under the products I have the related products slider and I want to use the sidebar.This is very bad :-/. So I must deactivate the sidebar and my customers cannot see upsell products on their mobile devices…

#140293 Copied

Olga Barlow

Support staff

September 22, 2016 at 09:51

Hello,

We are sorry, but the other way is customization only. You need to move tabs below the product content (xstore/woocommerce/content-single-product.php), but then you’ll have empty space at the right side http://prntscr.com/cky2n5

If you decide to make any changes use child theme to avoid problems with next theme update!

Regards

#140426 Copied

kumapanda

Participant

September 22, 2016 at 15:13

Ok. I thought that would be the only solution. So I will disable sidebar on mobile…

I have a last question about the sidebar:
I like the design of single product page very much. Only the width of the sidebar is too big and distracts from the product…

I like this width settings for the rows:
<div class=”row”>
<div class=”col-md-10 product-content sidebar-position-right”>
<div class=”row”>
<div class=”col-lg-5 col-md-6 col-sm-12 product-images”>
<div class=”col-lg-7 col-md-6 col-sm-12 product-information”>
</div>
</div>
<div class=”col-md-2 single-product-sidebar sidebar-right”>

What do you think?

How can I set only 1 column with products for upsell products?

And which file I must adjust to archive my goal 🙂 (column upsell products and change columns…)…

BEST and big thanks again!

Please, contact administrator
for this information.

#140474 Copied

Olga Barlow

Support staff

September 22, 2016 at 19:17

Hello,

Could you provide screenshot for better understanding?

Regards

#140513 Copied

kumapanda

Participant

September 22, 2016 at 20:05

Screenshot attached :)!

Please, contact administrator
for this information.

#140527 Copied
Olga Barlow

Support staff

September 24, 2016 at 07:42
Hello,

It is much easier to change width using css than change a few template files.

I have added the following code in your custom css:
```
/*--- Single product page custom---*/
@media (min-width: 1200px) {
.single-product-wide .product-images.col-lg-6.col-md-6 {
    width: 40%;
}
.single-product-wide .product-information.col-lg-6.col-md-6 {
        width: 60%;
}
.col-md-9.product-content.sidebar-position-right {
    width: 80%;
}
.col-md-3.single-product-sidebar.sidebar-right {
    width: 20%;
}
.single-product-wide .product-information-inner {
    width: 75%;}}
.sidebar-slider li {width: 100%;}
```
If you want to change number of products per view for your upsell slider you need to copy etheme_create_slider_widget function (xstore/framework/template-elements.php) in child theme functions.php and change it. It shows 4 items by default.

Regards
#140649 Copied
kumapanda

Participant

September 24, 2016 at 10:09

Ok. I thought it would be a bit difficult to change template files… Maybe you consider to change the view in my way too 😉 then I can get rid of the css overrides…

It is much better on smaller displays (like notebooks) now!

Product-upsell-slider worked. Thanks!

#140669 Copied

Olga Barlow

Support staff

September 24, 2016 at 10:14

You are welcome!

Regards

#140671 Copied
Viewing 10 results - 1 through 10 (of 10 total)