Return to previous page

Christmas Webshop - by irish - on WordPress WooCommerce support

This topic has 35 replies, 5 voices, and was last updated 7 years, 1 months ago ago by Rose Tyler

irish

Participant

September 28, 2016 at 12:59

Hello!

For a new webshop i have some question: (acces in private content)

1) How can i make the header more transparent?
2) How do i change the background color from topbar? + The text colors in topbar?

Please, contact administrator
for this information.

#140964 Copied

34 Answers
Rose Tyler

Support staff

September 28, 2016 at 13:40
Hello,

You can add this code in Custom CSS:
```
.fixed-header-area{
  opacity: 0.6;
}
.header-type-7 .top-bar {
  background-color: rgba(35, 33, 33, 0.85);
}
.header-type-7 .top-bar a{
 color: #b9c1be;
}
```
Add your own values.

Regards,
Rose Tyler.
#140966 Copied
irish

Participant

September 29, 2016 at 13:39

Hi Rose,

Thank you!

1) How do i change the font and color of the product titles in shop page?
2) how do i remove the categories of the products in shop page?
3) How so i change the font and color of the breadcrumbs+title? Ans now its all with big letters
4) How do i remove the filter button on shop page?
5) If i click on the button “in cart” on the shop page, i don’t see the product in cart?
6) I used for my background image (boxed layout) the width of 1920px. But when i look on a smaller screen like my notebook, i can’t see the right sight of the picture. How can i fix this?

#141077 Copied
Jack Richardson

Support staff

September 29, 2016 at 15:48
Hello,

1. You have this code in Global Custom CSS section:
```
.products-grid .product-title a {
    font-size: 22px;
    font-family: 'Great Vibes', serif;
    color: #9c2228;
}
.products-grid .product-title a {
    color: black !important;
}
```
Change its values.

2. Use this css code:
```
.products-page-cats {
   display: none;
}
```
3. Change this code in Global Custom CSS:
```
.page-heading .woocommerce-breadcrumb, .page-heading .title {
    color: #9c2228 !important;
}
.page-heading #breadcrumb, .page-heading .delimeter, .back-history, .page-heading a, .page-heading .woocommerce-breadcrumb, .page-heading .title {
    color: #005838;
    font-family: Great Vibes;
    font-size: 20px;
}
```
4. Go to Theme Options > Products Page Layout > Hidden sidebar > off.

5. As I see product is shown in cart page http://prntscr.com/cnsipn .

6. I’ve added background size as “contain” for your image in Theme Options > Color Scheme. Check it now.

Best regards,
Jack Richardson.
#141105 Copied
irish

Participant

September 29, 2016 at 20:14

Hi Jack,

Thank you!

1) Unfortunately the code for the product title on the shop page don’t work. I don’t get them any bigger.
2) Is it possible to have the breadcrumbs texts in normal letters, so not only in big letters?
3) Is it possible to make the background of the breadcrumbs fully transparent?

#141146 Copied
Eva Kemp

Support staff

September 30, 2016 at 08:49
Hello,

1. This code overrides your other code:
http://storage5.static.itmages.com/i/16/0930/h_1475221534_7019206_2494258a07.jpeg

Remove all duplications regarding product title code and use only one code.

2. Use this css code:
```
.page-heading .title {
   text-transform: capitalize !important;
}
```
3. Do you mean you want to see background image of your site behind the breadcrumbs?
Please show a screenshot what you want to achieve for better understanding.

Regards,
Eva Kemp.
#141165 Copied
irish

Participant

September 30, 2016 at 10:27

Hi Eva,

1) Okay understand! But the code for color for the product title is not working.
3) yes, that’s what i mean 😀
4) I’m realyy struggling with the background image of the website. I tried all sizes, but every time the image is not height OR not width enough. And when you make the screen smaller, you see a lot of the same images…
Which dimension does the background image need?

#141179 Copied
Rose Tyler

Support staff

September 30, 2016 at 11:52
Hello,

You can add this code in Custom CSS:
```
.products-grid .product-title a {
  color: #115b3a;
}
.page-heading.bc-type-1 {
   background: url(http://prettigekerstpakketten.com/wp-content/uploads/2016/09/achtergrond-homepage.png);
   background-size: cover;
}
body{
   background-repeat: no-repeat;
   background-size: cover;
}
```
Regards,
Rose Tyler.
#141186 Copied
irish

Participant

September 30, 2016 at 12:15

Thank you Rose! Really helpful! 🙂

1) See footer: How can i get the icons in the centre of the column? Already set those settings but it don’t work.
2) See footer: How can i change the color of the links? Now they are red..
3) The breadcrumbs background is still not transparent. Already tried this code but don’t work for me:
.bc-type-1 {
opacity: 0.7;
}

#141193 Copied
Rose Tyler

Support staff

September 30, 2016 at 12:27
Hello,

Use this css code:
```
.footer-top a {
  color: black;
}
.footer-top .wpb_wrapper {
  text-align: center;
}
```
Also, you can read the article and watch the video: https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/

Regards,
Rose Tyler.
#141197 Copied
irish

Participant

September 30, 2016 at 16:51

Thank you Rose! I have to say that your support i really great :)!

1. The breadcrumbs background is still not transparent. Already tried this code but don’t work for me:
.bc-type-1 {
opacity: 0.7;
}

#141230 Copied

Jack Richardson

Support staff

September 30, 2016 at 18:01

Hello,

Unfortunately transparency can be made for whole container, not only for breadcrumbs.
You can add background image for breadcrumbs.

Best regards,
Jack Richardson.

#141249 Copied

irish

Participant

October 5, 2016 at 13:08

Hello!

1. See breadcrumbs. How can i set only the title and the breadcrumbs like “home->shop” off?

#141625 Copied

Robert Hall

Support staff

October 5, 2016 at 16:05

Hello,

1. See breadcrumbs. How can i set only the title and the breadcrumbs like “home->shop” off?

Sorry, but your query is unclear.
Please show a screenshot of the issue and what you want to achieve.

Regards,
Robert Hall

#141663 Copied

irish

Participant

October 7, 2016 at 10:54

Hi Robert,

I mean the title area from a page. See http://prettigekerstpakketten.com/winkel/
You see in the red area: WINKEL and then under that “home->WINKEL”
How can i remove “Home->Winkel”??

So only the page title is showing.

#141922 Copied
Eva Kemp

Support staff

October 7, 2016 at 12:37
Hello,

Use this code in Global Custom CSS:
```
.page-heading .woocommerce-breadcrumb {
  display: none;
}
```
Regards,
Eva Kemp.
#141942 Copied
irish

Participant

October 12, 2016 at 11:40

Hi EVa,

1) The mobile menu had a black background and a black font, so unreadable ;).
How can i change those colors?

2) How can i change the color of the hamburger menu button?

#142401 Copied
Eva Kemp

Support staff

October 12, 2016 at 13:14
Hello,

1. Use this code in Global Custom CSS section:
```
.mobile-nav li a, .mobile-nav-heading {
    color: #FFF !important;
}
.st-menu {
  background: grey;
}
```
2. Add this css code in Global Custom CSS:
```
.menu-icon::before {
   color: green;
}
```
Regards,
Eva Kemp.
#142422 Copied
irish

Participant

November 18, 2016 at 13:44

Hello,

On the checkout page: The company has to be a required field
+ I need an extra tab for numbers. How can i make this?

#146246 Copied

Eva Kemp

Support staff

November 18, 2016 at 18:47

Hello,

This is related to Woocommerce configuration, not to the theme. Please refer to these articles:
https://www.skyverge.com/blog/how-to-edit-required-woocommerce-checkout-fields/
https://docs.woocommerce.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/

Regards,
Eva Kemp.

#146299 Copied
1 2

Viewing 20 results - 1 through 20 (of 35 total)