Return to previous page

Is there anyway to add a box type figure/background areas around various single page elements?

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

GTP

Participant

November 14, 2023 at 09:35

Hi there 8theme team,

Is there anyway to add a shadow box or backgrounds on the single page product builders elements to make them stand out?

More details on PCA

Thanks!

Please, contact administrator
for this information.

#373694 Copied Theme version: 9.2.3

7 Answers

Rose Tyler

Support staff

November 15, 2023 at 08:52

Hello, GTP,

Thank you for reaching out to us with your query. We appreciate your interest in enhancing the visual appeal of your product pages.

1/ We have a new builder with Elementor – https://www.8theme.com/documentation/xstore/xstore-builders/xstore-single-product-builder-with-elementor/ , here is an example with border added – https://prnt.sc/hWzaacYVxm2d

2/ There are a few ways to achieve the desired result, it can be custom CSS code or Elementor editor.

3/ We have this https://www.8theme.com/documentation/docs/xstore-setup-booster-sales-estimate-delivery/ and stying can be changed using custom CSS code.
If you want to improve this feature, please send a request to our devs.

Kind Regards,
8theme team

#373804 Copied

GTP

Participant

November 16, 2023 at 11:47

Hi Rose,

1) Thanks, looks great!

2) Just curious on how we would use elementor since the “amount of people viewing this” is coming from the sales booster panel section, it is not on the single page product builder?

3) Thank you, we were trying to get something with icons and text, i think we can use the elementor section for that.

Appreciate your help!

#373904 Copied

Rose Tyler

Support staff

November 16, 2023 at 13:54

Hello, GTP,

You’re welcome!

Single Product Builder with Elementor has Fake Live Views (Sales Booster) element https://prnt.sc/XLHOOqxexv31

Kind Regards,
8theme team

#373923 Copied

GTP

Participant

November 17, 2023 at 09:21

Hi Rose,

Thank you!

Is there anyway to replicate the website in the PCA and have that section “above/over” a colored box?

Please contact administrator
for this information.

#373998 Copied
Rose Tyler

Support staff

November 17, 2023 at 09:54
Hello, GTP,

Yes, custom CSS can be used https://www.w3schools.com/cssref/pr_background-color.php https://www.w3schools.com/cssref/css3_pr_border-radius.php
For example:
```
.single-product .sales-booster-live-viewing {
    background-color: #e8effc;
    border-radius: 10px;
    padding: 10px;
}
```
https://prnt.sc/TGMFErLZhkcW

Kind Regards,
8theme team
#374004 Copied
GTP

Participant

November 17, 2023 at 11:12

Hi Rose

Thanks!
and if we want to add it on something else, do we just change the code –

.single-product .sales-booster-live-viewing {

to the new “element” we want to add it to?
for example if we want to add it behind the price area where can we find the appropriate code to input?

#374012 Copied

Rose Tyler

Support staff

November 17, 2023 at 11:43

Hello, GTP,

Yes, you are right.

Classes you can find using the dev tools of browser – https://developer.chrome.com/docs/devtools/
For example – https://prnt.sc/ocskE_TGH88M

Kind Regards,
8theme team

#374016 Copied
Tagged: add box wordpress, box figure background, page elements customization, woocommerce page design, woocommerce single page elements, wordpress woocommerce templates
Viewing 8 results - 1 through 8 (of 8 total)