Christmas Webshop - by irish - on WordPress WooCommerce support

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

  • Avatar: irish
    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.
    34 Answers
    Avatar: Rose Tyler
    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.

    Avatar: irish
    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?

    Avatar: Jack Richardson
    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.

    Avatar: irish
    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?

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

    Avatar: irish
    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?

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

    Avatar: irish
    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;
    }

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

    Avatar: irish
    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;
    }

    Avatar: Jack Richardson
    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.

    Avatar: irish
    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?

    Avatar: Robert Hall
    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

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

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

    Avatar: irish
    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?

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

    Avatar: irish
    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?

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

    Avatar: irish
    irish
    Participant
    February 2, 2017 at 15:46

    Hello!

    1. Okay maybe stupid question but how can i change the color of the menu items? (are now green)
    2. Added FA-icon “gift” to cart icon but it’s not working
    3. See homepage: have a categorie widget here on the left. How can i change the grey text color of the categories?

    Avatar: irish
    irish
    Participant
    February 3, 2017 at 11:12

    Hello!

    1. Okay maybe stupid question but how can i change the color of the menu items? (are now green)
    2. I put a custom size for the cart icon but it does not work 🙁
    3. See homepage: have a categorie widget here on the left. How can i change the grey text color of the categories?
    4. Solved

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 3, 2017 at 13:32

    Hello,

    Sorry for a delay.
    1. Go to Theme Options > Typography > Menu Font
    2. Please try to use this code to change cart icon:

    .cart-bag .ico-sum  {
        background-color: transparent;
    }
    .cart-bag .ico-sum::before {
        border-color: transparent;
    }
    .cart-bag {
        padding: 18px 15px 15px !important;
        background-image: url("http://url_to_your_image");
        background-repeat: no-repeat;
        background-size: cover;
    }

    3.

    .menu-sidebar-home-container li a {
        color: red !important;
    }

    Regards,
    Rose Tyler.

    Avatar: irish
    irish
    Participant
    February 3, 2017 at 15:09

    Thanks Rose!

    1. See point 3; this works but only not for the second container on the homepage?

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 3, 2017 at 15:19

    Hello,

    Please, change last code to:

    .menu-sidebar-home-container li a, .menu-sidebar-homepage-2-container li a {
        color: red !important;
    }

    Regards,
    Rose Tyler.

    Avatar: irish
    irish
    Participant
    February 3, 2017 at 15:27

    Oké perfect!

    Last question: The cart icon is not going well. Uploaded a image with your code but it too large now, image is 24 x 24px, en the old cart is still visible all tough i removed it

    Avatar: Eva
    Eva Kemp
    Support staff
    February 4, 2017 at 09:45

    Hello,

    As I see the icon is shown properly http://www.awesomescreenshot.com/showImage?img_id=2134853 .
    Please show a screenshot of the problem.

    Regards,
    Eva Kemp.

    Avatar: irish
    irish
    Participant
    February 8, 2017 at 08:00

    Hi!

    Hopefully last question:

    1. Checkout page: the fill-in tabs are showing the text for half of the letters. How can this nee fixed?

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 8, 2017 at 11:45

    Hello,

    Please, add this code in Custom CSS:

    .woocommerce-checkout .form-row input.input-text {
        line-height: 20px;
    }

    Regards,
    Rose Tyler.

    Avatar: irish
    irish
    Participant
    February 17, 2017 at 14:58

    Hello,

    1. When scrolling down- fixed header has no menu. How can i remove this option completely?
    2. Checkout page: Fields for sending adress; texts are showing half.
    3. http://www.prettigepakketten.com/mijn-account/orders/ this button is total black. How can i change colors?
    4. When you click on “Register” in topbar you’ll see the logo screen, not the register screen ?

  • 1 2
    Viewing 30 results - 1 through 30 (of 35 total)

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

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