Styling the Single Product Page

Hybrid1ltd · March 2021

Hi,

A client has asked me to set up a shop for them with BeTheme.

I have created a test product but cannot see where I can customise the layout of this page, even Theme Options - Shop doesn't seem to make much difference.

In the screenshot, I'd like to:

Add a Header image for single product page. At the moment the product is at the top of the screen and you cannot see the menu as its white
The quantity button is also white because i need it to be white on the dark contact forms elsewhere on the site, but here it needs to be black.

Thanks

Phil · March 2021

Hello,

1) The product is at the top of the screen because you have set the header's height to zero. You can move it down by adding the header's height in Betheme -> Theme options -> Header & Subheader -> Header.

But if you would like to set the Header image anyway, you will have to create the Custom CSS Code and put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

2) To change the button style for products only, you will have to use Custom CSS as well.

If you need help with writing these CSS's, please, let me know, but I will need a link to your website.

Thanks

Hybrid1ltd · March 2021

Hi,

Thanks for your help, I have header images on each page, that's why its set to 0.

So if i change that value it adds a second header above the image..

http://hybrid1dev.co.uk/product/test-product

http://hybrid1dev.co.uk/cart

http://hybrid1dev.co.uk/checkout

These 3 WooCommerce pages are the ones that I just need to place a header at the top, and change the colours for quantity and add to cart button.

Thanks

Hybrid1ltd · March 2021

Ok after some Googling, I found a solution..

I can create a new slider in Revolution slider and then edit the single-products.php file in WooCommerce.

It wont let me paste the code here, it blocks me. But may be useful for others trying to solve this issue.

Phil · March 2021

I am glad that you found the solution for the Header image ?.

To change the quantity, please, use the following CSS Code:

.woocommerce .cart .quantity .text{
 color: #000!important;
}

But I just noticed that the button background could not be changed with CSS Code, and it needs to be modified in Betheme -> Theme options -> Global -> Buttons. It is the Highlighted button.

If you do not see these options, you need to select the Custom style.

Thanks

Hybrid1ltd · March 2021

Styling the Single Product Page

Comments