Return to previous page

Setting up product page with sidebar - by gfarquhar

This topic has 16 replies, 4 voices, and was last updated 9 years, 7 months ago ago by Eva Kemp

gfarquhar

Participant

April 17, 2015 at 15:04

I want to set up my product pages to look like this demo: https://www.8theme.com/demo/woopress/?product=fashion-demo-accessories-7. But I can not figure out how to add the sidebar with brands and latest products. Currently my page looks like this: http://development.nvdepot.com/?product=pvs-14

#57745 Copied Theme version: Version 1.4 WooCommerce version: Version 2.3.7

15 Answers

Eva Kemp

Support staff

April 17, 2015 at 16:10

Hello,

Go to Appearance > Widgets > “Single Product page Sidebar” area and drag “Woocommerce Products” widget into there. To display brands you need create them in wp-admin panel > Products > Brands, then edit a product and mark it with your brand on the right side of the editor.

Thank you.
Regards,
Eva Kemp.

#57766 Copied

gfarquhar

Participant

April 17, 2015 at 16:29

Great both of those work, thank you!! On my site I have been running into a lot of things being black text on black buttons/backgrounds since I set my default text to black in the theme options. The three most important are the black text on the add to cart button, the black text on the continue shopping button that is on the popup after adding to cart and the black text on the product slider on the homepage on hover that says “add to wishlist and “quickview” I have tried a bunch of different thing to change these and I can’t quite figure it out.

#57770 Copied
Eva Kemp

Support staff

April 17, 2015 at 18:06
Hello,

Please add this code in custom.css file:
```
.product-information .cart button[type="submit"], .emodal .emodal-text .btn, .footer-product a {
 color: white !important;
}
```
How to create custom.css you can watch in this tutorial (it’s for Legenda theme but the process is the same).

Thank you.
Regards,
Eva Kemp.
#57783 Copied
gfarquhar

Participant

April 17, 2015 at 19:02

So when adding custom css I add that file to the original theme directory, not the child theme that I am using, correct? That worked for me except for the “add to wishlist” and “quickview” links. The add to wishlist text turned white but I lost the green hover it had, the quickview is still the dark text with a green hover. I would like both to be white text with green hover.

#57799 Copied

Eva Kemp

Support staff

April 17, 2015 at 19:39

Hello,

If you’re using child theme you need add that code in style.css of the child theme.
Please provide us with wp-admin panel credentials in Private Content.

Thank you.
Regards,
Eva Kemp.

#57816 Copied

gfarquhar

Participant

April 17, 2015 at 19:44

Below is the information requested. The code did not work in the style.css of the child theme, that is why I tried adding it to the custom css of the parent theme.

Please, contact administrator
for this information.

#57820 Copied

Brian Johnson

Member

April 20, 2015 at 09:38

Hello

Please provide us with ftp credentials to let us create Child Theme which contains style.css. You may read here about Child Theme..

With best regards
Brian Johnson

#57991 Copied

gfarquhar

Participant

April 20, 2015 at 13:48

I am using the child theme included with the theme, the code you provided just did not work with it. Below are my ftp credentials.

Please, contact administrator
for this information.

#58057 Copied
Eva Kemp

Support staff

April 20, 2015 at 15:30
Hello,

I’ve added this code in style.css of the child theme:
```
.footer-product span {
    color: white !important;
}
.footer-product span:hover, .footer-product a:hover {
    color: #3FAE29 !important;
}
```
Please check “Add to Wishlist” and “Quick View” links now.

Regards,
Eva Kemp.
#58097 Copied
gfarquhar

Participant

April 22, 2015 at 19:27

That code worked, thank you very much! I found one more place where the text is the wrong color. In the mobile size when it goes to the expandable menu, when you click on the menu the text is dark on a dark background with green hover. I would like it to be white on a dark background with green hover.

#58827 Copied
Eva Kemp

Support staff

April 22, 2015 at 20:08
Hello,

Please add this code in custom.css file:
```
.et-mobile-menu li a {
    color: white !important;
}
.et-mobile-menu li a:hover {
    color: #3FAE29 !important;
}
```
Thank you.
Regards,
Eva Kemp.
#58833 Copied
Robert Hall

Support staff

April 22, 2015 at 20:12
Hello,

I’ve added this code in style.css. Please check it.
```
.et-mobile-menu li a,
.mobile-nav .mobile-nav-heading,
.mobile-nav .links li a{
color:#fff !important;
} 
.et-mobile-menu li a:hover,
.mobile-nav .mobile-nav-heading:hover,
.mobile-nav .links li a:hover{
color: #3fae29 !important;
}
```
Regards,
Robert Hall.
#58837 Copied
gfarquhar

Participant

April 29, 2015 at 15:26

Works great thanks! I am having trouble with adding the breadcrumbs background. I changed the image but it is not showing up.

#60578 Copied

gfarquhar

Participant

April 29, 2015 at 15:29

Never mind I figured it out!

#60581 Copied

Eva Kemp

Support staff

April 29, 2015 at 15:30

Hello,

That’s great.
If there are any questions feel free to contact us.

Regards,
Eva Kemp.

#60583 Copied
Viewing 16 results - 1 through 16 (of 16 total)