Return to previous page

How to add lines/put elements/buttons inside boxes/shapes?

This topic has 4 replies, 2 voices, and was last updated 1 years, 1 months ago ago by Rose Tyler

GTP

Participant

December 31, 2023 at 16:24

Hi 8theme team,

Is there anyway to put the elements/buttons which are on the single page product pages inside lines/boxes?

For example – put the add to cart button inside a rectangular element, so it appears to stand out from the other things (make it draw attention to customers) etc.

Please see PCA.

Thanks for your help!

Please, contact administrator
for this information.

#378123 Copied Theme version: 9.2.5

3 Answers
Rose Tyler

Support staff

January 1, 2024 at 13:35
Hello, GTP,

Thank you for choosing XStore as your WooCommerce WordPress theme!

Please be informed that you can utilize custom CSS code to accomplish your desired customizations: https://prnt.sc/azsFzoAxZqVP

.single-product-builder form.cart { border: 1px solid #e1e1e1; padding: 15px; }

Kind Regards,
8theme team
#378188 Copied
GTP

Participant

January 2, 2024 at 17:48

Hi Rose,

Thanks for your reply.

1) Thanks for the code! We are guessing we can also edit the border of the line to make it thicker/bolder via editing the “1px” and the color by changing the # code (for colors)

2) If we wanted to add color in the background of the container box (for example make it sky blue – versus the current plain white), may we also know the code for that?

3) Just curious if we wanted to add something similar (border radius) around the main title of the product or anything else in that case, would we just switch the code of;

.single-product-builder form.cart {

To something else?
And where can we find the code names for other elements in the single page product builder?
For example

a) The main title
b) The ratings (stars)
c) The “people are viewing this product right now” section.

If you can let us know where to find the code names for these, it would be great! (maybe a screenshot)?

Appreciate your help!
Thanks once again.

#378348 Copied

Rose Tyler

Support staff

January 3, 2024 at 10:51

Hello, GTP,

1/ Yes, you can edit the border style in the code.
read more – https://developer.mozilla.org/en-US/docs/Web/CSS/border

2/ background-color: skyblue;
https://prnt.sc/YIw05dMmOTtK
https://developer.mozilla.org/en-US/docs/Web/CSS/background-color

3/ You can use the Chrome inspector tool or any other browser dev tool to find the HTML structure of the page and classes that all the elements have https://prnt.sc/-44VKfuIJHvG

a) .single-product .product_title
b) https://prnt.sc/4tK5zJLfNBk_
.single-product .et_product-block .woocommerce-product-rating
c) .sales-booster-live-viewing

Kind Regards,
8theme team

#378405 Copied
Tagged: adding lines woocommerce, buttons in shapes woocommerce, elements in boxes woocommerce, woocommerce design tips, woocommerce wordpress templates, wordpress customization guide, wordpress template modifications
Viewing 4 results - 1 through 4 (of 4 total)