Return to previous page

Categories in the Single Product Page - by absico

This topic has 11 replies, 3 voices, and was last updated 9 years, 2 months ago ago by Jack Richardson

absico

Participant

October 6, 2015 at 19:24

Hi
I want to display the products categories in the left sidebar of the Single Product page exactly as displayed in the Home page.

#91914 Copied Theme version: Version: 3.3 WooCommerce version: Version 2.4.7

10 Answers

Jack Richardson

Support staff

October 7, 2015 at 07:25

Hello,

You need add Woocommerce Product Categories widget into “Single Product Sidebar” area in Appearance > Widgets.

Best regards,
Jack Richardson.

#91976 Copied

absico

Participant

October 7, 2015 at 08:04

Hi
The “Single Product Sidebar” appears custom area of the “Single Product Page” which is on the left side of the page according layout. And this custom area is not wide enough .

I want the sidebar to appear in the left side of the page exactly as it is in the main shop page.
And I want to use the “8theme subcategories list Widget” Not the “Woocommerce Product Categories widget”
This is a screenshot if the main shop page with its side bar on the left :

#91995 Copied

Jack Richardson

Support staff

October 7, 2015 at 10:15

Hello,

Please provide us with WP dashboard and FTP (FTP host, FTP user, FTP password) credentials in private content.

Best regards,
Jack Richardson.

#92084 Copied

absico

Participant

October 7, 2015 at 10:23

As below
thanks

Please, contact administrator
for this information.

#92088 Copied
Brian Johnson

Member

October 7, 2015 at 10:43
Hello, absico

1.Please add following code into the custom.css:
```
.product-shop{width:250px !important}
#product-page .product-shop .addto-container .button.big {margin-left:17px;}
#product-page .product-sidebar{width:220px}
```
2.Replace widget with the one you preffer in appearance-widets.

Regards,
Brian Johnson
#92114 Copied
Jack Richardson

Support staff

October 7, 2015 at 11:47
Hello,

I’ve changed widget to “8theme subcategories” and added the following css code in custom.css:
```
#product-page .product-shop {
    float: right;
    width: 300px;
}

#product-page .product-sidebar {
    border-left: none;
    float: left;
    width: 220px;
    margin-left: 0px;
    padding-left: 0px;
}

#product-page .product-images {
    width: 400px;
    margin-left: 250px;
    position: absolute;
}
```
Please check your site now.

Best regards,
Jack Richardson.
#92153 Copied
absico

Participant

October 7, 2015 at 12:56

Hello Jack
your code works great on the laptop screen.
Three issues appears on the mobile screen :
1- The image of the products goes to the right(Not Responsive)
2- The related products widget becomes upside down and not scrollable.
3- 8theme subcategories sidebar disappears.

I really appreciate your help and support
best regards
absico

#92190 Copied
Jack Richardson

Support staff

October 7, 2015 at 19:58
Hello,

I’ve edited previously provided css code to the following:
```
@media (min-width: 1200px) {
#product-page .product-shop {
    float: right;
    width: 300px;
}

#product-page .product-sidebar {
    border-left: none;
    float: left;
    width: 220px;
    margin-left: 0px;
    padding-left: 0px;
}

#product-page .product-images {
    width: 400px;
    margin-left: 250px;
    position: absolute;
}}

@media (max-width: 768px) {
#product-page .product-sidebar {
    display: block;
    width: 220px;
    float: left;
    text-align: left;
    border: none;
}}
```
Also changed the code in the /wp-content/themes/blanco/woocommerce/single-product/related.php file in lines 46 and 52 <?php if($related_count > 3): ?> to display slider on mobile devices.

Please check your site now.

Best regards,
Jack Richardson.
#92355 Copied
absico

Participant

October 7, 2015 at 21:05

Thanksssssssssss

#92371 Copied

Jack Richardson

Support staff

October 7, 2015 at 21:17

Hello,

You are welcome!

Best regards,
Jack Richardson.

#92374 Copied
Viewing 11 results - 1 through 11 (of 11 total)