Return to previous page

How Do I Style the Ecommerce Parts - by uuddtodd

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

uuddtodd

Participant

November 6, 2019 at 00:59

Hello

I can’t seem to find any documentation on how to style the actual ecommerce elements. If you go to this url, you’ll see i have a dummy product set up but it’s hard to see due to the site background.
https://dev.huntersofavalon.com/shop/?v=7516fd43adaa

i’d like to simply put an 80% white transparent row behind that content (like on the breadcrumb area). On the product page itself, i hacked the css to remove the background image but it doesn’t look that great. i’d like to know how to actually change/style the ecommerce portions.

thanks

todd

#224402 Copied Theme version: 6.0.1 child 0.0.1 WooCommerce version: 3.7.0

8 Answers
Rose Tyler

Support staff

November 6, 2019 at 08:24
Hello,

Got to pages > Edit page > Page Layout > Page background
You can use custom CSS code. For example, add this code in Theme Options > Custom CSS area or in style.css file of child theme:
```
.shop-full-width {
    background-color: hsla(0, 0%, 100%, 0.8);
}
```
Note, that you should not edit code in style.css of the parent theme.
Let us know if you need any further assistance.

Regards
#224420 Copied
uuddtodd

Participant

November 6, 2019 at 17:02

hi

thank you for the reply. for your reference – editing the page background on that page doesn’t change the background image. you can add a new background image but you can’t remove the site background. you may want to adjust your theme to include a way to remove the background images on individual pages or set it to none.

the code you sent worked for styling that background but there is still an issue with the actual product page:
https://dev.huntersofavalon.com/shop/common/placeholder-product-common/?v=7516fd43adaa

is there a way to edit the commerce styles and layout without modifying the css directly? i don’t mind doing it, but it seems like everything else has a wysiwyg editor. i want to modify some of the content elements (like the social media links) but i can’t seem to find a way to do it.

thank you

#224485 Copied
Rose Tyler

Support staff

November 7, 2019 at 09:15
Hello,

Try to change Page background via Edit page > Page Layout settings. If this doesn’t help, describe the desired result in more details and we will help you with custom CSS code.
To apply the bg color for single product page, add this code:
```
.single-product .st-pusher .page-content {
    background-color: hsla(0, 0%, 100%, 0.8) !important;
    padding: 15px;
}
```
Let us know what exactly do you want to edit and we will guide you.
What social links do you want to change? Provide a screenshot of the area with links, because social links could be added to widget areas (Appearance > Widgets) or as the page/Static block element.
You can use Lightshot Screenshot tool https://app.prntscr.com/en/index.html and provide the link to screenshot here.

Regards
#224522 Copied
uuddtodd

Participant

November 7, 2019 at 19:24

in general, i would like to know how to edit the ecommerce parts myself without having to ask you how to do it in the forum every time we want to make a change. i’ve looked through your documentation and watched the videos but they seem slightly outdated and don’t appear to have any instructions for those sort of modifications. i tried following the instructions for essential grid (i’m not even sure if that is what needs to be done to edit these pages) and there is no button for importing demo content. it’s a little frustrating that your support documentation doesn’t match the implementation. i haven’t even gotten to styling the other pages on the site, but i assume i’m going to have the same issues with the checkout and account pages. it would be nice to not have to bother you with each one.

on the specific page we are discussing, the code you provided isn’t quite what i need. if you look at the previous page, i want the content area transparent white to completely overlap the background on the left and right. it also creates issues with a weird white background on the product description header and some of the 1px white lines are hard to see. i want to change those to the same color as the blue line in the footer.

there doesn’t seem to be an image upload option here for a screen shot. i want to remove google plus (it doesn’t even exist anymore, you should take it out of your theme) and add instagram.

#224571 Copied
Rose Tyler

Support staff

November 8, 2019 at 15:56
Dear,

1) Do you mean this documentation https://www.8theme.com/demo/docs/woopress/ ?
All available settings for WC pages you can find in Theme Options > Shop, Products Page Layout and Single Product. Default settings for such pages are in Appearance > Customize > Woocommerce. Because WC pages are default pages of the plugin, you need to use custom css code to change styling.
2) Because of the current content structure, the single product page can’t have full-width background color as you described. Additional customization in files is outside the scope of basic theme support, sorry.
3) This code:
```
.single-product .meta-title span {
    background-color: transparent;
}
.single-product .product-navigation h4.meta-title:after {
    left: 53% !important;
    width: 47%;
}
```
will give you such result – http://prntscr.com/pu9rn1
4) Provide screenshots of mentioned borders. You can use Lightshot Screenshot tool https://app.prntscr.com/en/index.html and provide the link to screenshot here.
5) Google plus was removed from 8theme – Social links widget in the latest version of the theme – https://themeforest.net/item/royal-multipurpose-wordpress-theme/8611976
Instagram API doesn’t have share function and can’t be included in share icons.

Regards
#224624 Copied
uuddtodd

Participant

November 11, 2019 at 17:58

how do you upload images? i have a screenshot on my desktop i can’t upload here since there is no upload option.

#224858 Copied

uuddtodd

Participant

November 11, 2019 at 18:00

is there no way to change the actual elements on the page? i understand how to configure the layout options but if i want to remove ALL the social share elements, is there a way to do that? there doesn’t seem to be any way to modify those pages in the same manner as every other part of the theme.

#224859 Copied

Rose Tyler

Support staff

November 12, 2019 at 09:32

Hello,

Please use the mentioned additional tool, or upload images to your media library and provide us with links.
Theme Options > Single Product > Show share buttons > Off and same for Blog layout.
Because the mentioned pages are default WC pages, they can be edited in a specific way only. Changes can be done via custom CSS code or by additional customization in files of a child-theme.

Regards

#224894 Copied
Viewing 9 results - 1 through 9 (of 9 total)