More space for Product Title

Hello,

1. In order to make the title a little bit wider, you need to hide the “Brands” logo via Theme Settings -> Shop -> Brands -> turn off the “Show brand on the single product page” option.

https://gyazo.com/8fadeca126c7604a2dbebb976c8925ed

2. Such breadcrumbs styles you can create with the help of the layout builder.

https://prnt.sc/HA6FSFxqT8NU

Here is our documentation on how to use layout builder:

https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

Kind Regards

Hello,

In general, the default product page comes from WooCommerce so we cannot change everything.

1. The below code will help you to wide buttons. Enter it into the “Custom CSS for desktop” area that is in Theme Settings -> Custom CSS.

.single-product .summary-inner .cart {
    display: flex;
}

.single-product .summary-inner .single_add_to_cart_button,
.single-product .summary-inner .wd-buy-now-btn {
    width: 100%;
}

2. This one code will help you to widen the product summary. Also, add it to the “Custom CSS for desktop” area.

.single-product .product-full-width.product-summary-shadow .summary-inner {
    max-width: 100%;
}

After that, the description tab will be also wider.

3. In order to make the images smaller, please navigate to Theme Settings -> Single product -> Images -> choose the appropriate option from the “Product image width” field.

https://gyazo.com/1ee90e9622b0cbadaa0255e111cc020f

Please let me know if I missed something.

Kind Regards

• This reply was modified 2 years, 5 months ago by Luke Nielsen.

Hello,

1. I have edited the old custom code so now it works well.

https://gyazo.com/a780379ea1c1301105bac8b274c522de

2. Different heights of the products have nothing to do with my code because it is related to the “Masonry grid” option that is situated in Theme Settings -> Product archive -> Product styles. You need to disable it and check the issue again.

https://prnt.sc/h8Fri-4Y0qbz

https://gyazo.com/21ee8bdc74fac8569bca406d48636d7c

Kind Regards

Hello,

I have changed a little bit the old code, so now it should work well.

https://prnt.sc/gswDwz8yC2Or

https://gyazo.com/beb43902c58ad5a70054b0dc6abe5e0f

https://gyazo.com/405b77873ad8ab5716f591304abf74de

Please let us know if there is anything further we can assist you with!

Kind Regards

Hello,

1. I saw that you have added the “Pay” button and now buttons display well unlike your screenshot. Please let me know if you have sorted it out.

https://prnt.sc/WDhpw2AgY2pa

2. In order to make the main product image smaller, please enter the below code into the “Custom CSS for desktop” area that is in Theme Settings -> Custom CSS.

.single-product .woocommerce-product-gallery__image {
    max-height: 500px;
    display: flex;
    justify-content: center; 
}

.single-product .woocommerce-product-gallery__image img {
    width: 500px;
}

In the meantime, feel free to ask me any questions you may have.

Kind Regards

Hello,

With the help of the below code, you can resize columns on the product page. Please enter the below code to the “Custom CSS for desktop” area that is in Theme Settings -> Custom CSS.

.single-product .product-image-summary-inner .product-images {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}

.single-product .product-image-summary-inner .entry-summary {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}

Kind Regards