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

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

  • Avatar: GTP
    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.
    3 Answers
    Avatar: Rose Tyler
    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

    Avatar: GTP
    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.

    Avatar: Rose Tyler
    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

  • Viewing 4 results - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.Log in/Sign up

Helpful Topics

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.