Cosplay webshop - by irish - on WordPress WooCommerce support

This topic has 65 replies, 4 voices, and was last updated 7 years, 4 months ago ago by Rose Tyler

  • Avatar: irish
    irish
    Participant
    December 14, 2016 at 12:51

    Hello there!

    I have some questions for the webshop i’m building:

    – I want to have a categorie menu on the left of the homepage, like your shoptemplate “Snowboard”. But when i added the Categorie widget i don’t get a blue line around it.
    How can i do this? And is it possible to make the corners on the top, left and right, more round? Do the area where the title is in it, it supposed to be a blue background 🙂

    64 Answers
    Avatar: Eva
    Eva Kemp
    Support staff
    December 14, 2016 at 16:37

    Hello,

    Are you using Product Categories element in Visual Composer editor?
    Please provide WP Dashboard credentials in private content.

    Regards,
    Eva Kemp.

    Avatar: irish
    irish
    Participant
    December 14, 2016 at 20:55

    Hi Eva,

    Yes i did, exactly how the template was build.
    Acces in Private content 🙂

    2. At the product page, the zoom function for the product image does not working 🙁

    Please, contact administrator
    for this information.
    Avatar: Eva
    Eva Kemp
    Support staff
    December 15, 2016 at 11:49

    Hello,

    You forgot to write the site url.
    Please provide it.

    Regards,
    Eva Kemp.

    Avatar: irish
    irish
    Participant
    December 15, 2016 at 16:21

    Oh how stupid! See private content

    Please, contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    December 15, 2016 at 16:44

    Hello,

    Try to add this code in Custom CSS:

    .woocommerce_product_categories .widget-title {
        background-color: #0cb3d7 !important;
        padding-left: 10px;
        border-top: 0;
        color:white;
    }
    .woocommerce_product_categories {
        border: 2px solid #0cb3d7;
        border-radius: 7px;
    }
    .woocommerce_product_categories .product-categories li a {
        margin-left: 10px;
    }
    .woocommerce_product_categories .product-categories {
        margin-bottom: 0;
    }
    .widget_product_categories{
      border: 2px solid #0cb3d7;  
      margin-bottom: 20px;
      border-radius: 7px;
    }
    .widget_product_categories ul li a {
        margin-left: 1vw;
    }
    .widget_product_categories h2 {
        padding-left: 1vw;
        padding-top: 1vw;
        padding-bottom: 1vw;
        color: white;
        border-bottom: 2px solid #0cb3d7;
        background-color: #0cb3d7;
    }
    .widget_product_categories .with-accordion {
        margin-bottom: 0;
    }

    To make zoom effect work correctly you need to upload image with a larger size http://prntscr.com/djsph8, or you can disable zoom (Theme Options > Single Product Page > Zoom effect).

    Regards,
    Rose Tyler.

    Avatar: irish
    irish
    Participant
    December 16, 2016 at 11:22

    Hi Rose!

    Thank you so much. Exactly what i mean!

    1. Is it possible to have a hover color over the categories? I prefer to have the full background in blue and the text in white.
    If that is not possible i also agree white only text hover

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    December 16, 2016 at 11:35

    Hello,

    You’re welcome!
    Please add this code in Custom CSS:

    .widget_product_categories h2 {
        margin-bottom: 0;
    }
    .product-categories > li:hover {
        background-color: rgba(12, 179, 215, 0.38);
    }
    .product-categories > li:hover a {
        color: white;
    }
    .product-categories > li {
     transition: all 0.2s ease-in-out;
    }

    Regards,
    Rose Tyler.

    Avatar: irish
    irish
    Participant
    December 20, 2016 at 11:28

    Hi Rose,

    Perfect! Exactly what i mean!

    1. See header. How can i remove the grey separators between the menu items?
    2. See homepage: When hovering the products, i only see the text “Add to wishlist” but not the quick view? How can i fix this?

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    December 20, 2016 at 11:34

    Hello,

    Try to add code:

    .header-type-8 .menu-wrapper .menu-main-container > ul > li > a {
        border: none;
    }
    .header-type-8 .menu-wrapper .menu-main-container > ul > li:last-child > a {
        border: none;
    }
    
    .home .yith-wcwl-add-button {
        width: 20px;
    }

    Regards,
    Rose Tyler.

    Avatar: irish
    irish
    Participant
    December 20, 2016 at 11:49

    Hi Rose,

    You are so quick 🙂

    1. Maybe strange question but on every webshop i make in Royal, i can’t edit the dashboard. I can’t remove items en drag en drop them somewhere else. Do you know why?

    2. See Homepage: I used Seperator with text. How can i edit the text size? Is it also possible to make them a H1? And why is the separator not exactly in the middle?

    3. See footer: How can i get all the text of the Recent Post Widget white?
    4. See footer: Why is “Tel:” and “Email:” black? Cant find the solution.
    5. See footer: How can i edit the background color of the Copyright area? And make those texts white?

    6. See homepage: When hovering the products, i only see the text “Add to wishlist” but not the quick view? How can i fix this?

    7: See shop page: http://cosplayclues.nl/product-categorie/pruiken/
    Is it possible to have the categories, the same as on the homepage?
    8. See shop page: I added the Filter widget on color, in the shop sidebar. But it’s not showing
    9. See shop page: See all button like “filter” and the page numbers. How can i get all texts white? And background blue?

    10 See product page like: http://cosplayclues.nl/product/bleu-pink-wig-cosplay-kopie/
    Is it possible to make it standard, that the brand is UNDER the offers? Always?

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    December 20, 2016 at 14:46

    Hello,

    1. Sorry, but your question is unclear. Please, provide screenshot for our better understanding what exactly you want to change.
    2.

    .home .vc_separator.vc_separator_align_center h4 {
        font-size: 21px !important;
    }

    3.

    footer .date-event {
        color: white;
    }
    footer .blog-post-list .media-body {
        color: white;
    }
    .main-footer-1 .blog-post-list li .media-body strong {
        color: white;
    }
    .main-footer-1 .blog-post-list .media-heading a {
        color: white;
    }

    4.

    .main-footer-1 .white-text {
        color: white;
    }

    5.

    .copyright {
        background-color: blue !important;
    }
    .copyright-1 .textwidget a {
        color: white;
    }

    6. http://prntscr.com/dlq4i1
    7.

    .sidebar-widget.widget_product_categories .widget-title {
        color: white;
        background-color: #3297ff;
        font-weight: 600;
        border-top: 0;
    }
    .sidebar-widget.widget_product_categories .widget-title span {
        background-color: #3297ff;
        margin-left: 15px;
    }

    8. http://prntscr.com/dlq97m
    9.

    .price_slider_wrapper .price_slider_amount button {
        color: white;
        background-color: #3297ff;
    }
    .pagination-cubic li span.page-numbers.current {
        color: white;
        background-color: #3297ff;
    }

    10. In this case, you need try to edit the files wp-content/themes/royal/woocommerce/content-single-product.php

    Regards,
    Rose Tyler.

    Avatar: irish
    irish
    Participant
    December 20, 2016 at 15:05

    Hi rose!

    Thank you so much!!

    1. I mean the WordPress dashboard. Normally you can drag and drop the items everywhere, or remove them. but now you can’t do that en can’t set the screen option.

    2. See copyright area. Is it possible to remove that white line en make the row a little bit smaller in height?

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    December 20, 2016 at 15:17

    Hello,

    1. As I see it’s working fine. Please see screenshots: http://prntscr.com/dlqvr8
    2. Please add this code in Custom CSS:

    .copyright-1 .container .row-copyrights {
        border: 0;
        padding-top: 0;
        padding-bottom: 15px;
    }

    Regards,
    Rose Tyler.

    Avatar: irish
    irish
    Participant
    December 21, 2016 at 10:50

    Hi Rose!

    1. See a product page like http://cosplayclues.nl/product/bleu-pink-wig-cosplay-kopie/:
    Why isn’t the picture cropped? Click for example on the hair picture, that one is very large and i think that’s why the zoom function does not work.
    2. See a product page like http://cosplayclues.nl/product/bleu-pink-wig-cosplay-kopie/:
    Can i remove the function next to “product description” to go to the next or previous product?

    3. See a product page like http://cosplayclues.nl/product/bleu-pink-wig-cosplay-kopie/:
    Can we make the social icons with a green background, white icon?

    4. Breadcrumbs: Is it possible to make all texts, also the links, white?

    5. When hovering the cart, you’ll see a dropdown with the product. Is it possible to make the button “Checkout” blue background?

    6. See Cart: http://cosplayclues.nl/winkelmand/
    Is it possible to make the button “checkout” green background with white text?
    7. See Cart: http://cosplayclues.nl/winkelmand/
    Is it possible to make the button “Coupon (kortingsbon)” blue background with white text?
    8. Is it possible to make the button “Edit cart” blue background with white text?

    9. See checkout page: http://cosplayclues.nl/afrekenen
    When typing something in the fields, you only see the half of the text. (This something i mentioned by all the webshops we build with Royal, so maybe a good thing for the next update :))

    10. See checkout page: http://cosplayclues.nl/afrekenen
    Is it possible to make the checkout button blue?

    11. See homepage: You give me the CSS to make the beautiful hover effect over the categories menu. Now my client want this also at the menu in the header. Is this possible?

    Sorry for al the questions. We have a really difficult client 🙁

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    December 21, 2016 at 14:42

    Hello,

    1. You have too small product images http://prntscr.com/dm5wnw. Please upload bigger images (approximately from 1 425px × 1 900px) or disable zoom.
    2.

    .single-product .product-navigation .product-arrows {
        display: none;
    }

    3.

    .single-product .menu-social-icons i {
        background-color: green;
    }
    .single-product .menu-social-icons circle {
        stroke: green;
    }

    4.

    .page-heading.bc-type-1 a {
        color: white;
    }
    .page-heading .delimeter{
        color: white;
    }

    5.

    .widget_shopping_cart_content .big.filled {
        background-color: blue;
    }

    6.

    .cart-collaterals .checkout-button {
        background-color: green;
        color: white;
    }

    7.

    .checkout_coupon .btn {
        background-color: blue;
    }

    8.

    .woocommerce-cart .actions .btn {
        background-color: blue;
    }

    9.

    .woocommerce-billing-fields input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"] {
        padding: 8px 10px !important;
    }

    10.

    .woocommerce-checkout .button {
        background-color: blue;
    }

    11.

    .header-type-8 .menu-wrapper .menu-main-container > ul > li > a:hover {
        background-color: rgba(153, 191, 10, 1);
        color: white;
    }
    .header-type-8 .menu-wrapper .menu-main-container > ul > li a {
        transition: all 0.2s ease-in-out;
    }
    .header-type-8 .menu-wrapper .navbar-collapse .menu-main-container .menu{
        display: flex;
    }
    .header-type-8 .menu-wrapper .menu-main-container > ul > li{
        display: flex;
    }

    Regards,
    Rose Tyler.

    Avatar: irish
    irish
    Participant
    January 3, 2017 at 11:34

    Hello!

    1. The background of the “Out of stock” image, that shows in the product image has now a white background. How can i make this background green?

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    January 3, 2017 at 11:42

    Hello,

    Please add this code in Custom CSS:

    .out-stock {
        background: rgba(0, 128, 0, 0.6);
    }

    Regards,
    Rose Tyler.

    Avatar: irish
    irish
    Participant
    January 3, 2017 at 12:09

    Thanks Rose!

    1. See http://cosplayclues.nl/product/bleu-pink-wig-cosplay-kopie/ Because of the colours, i’m getting an extra tab ” Extra information”. Can i remove that on whole webshop?

    2. See Breadcrumbs on page like: http://cosplayclues.nl/product/bleu-pink-wig-cosplay-kopie/
    How can i edit the font and size?
    how can i make all links white?

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    January 3, 2017 at 12:37

    Hello,

    1. Please read here how to remove tabs https://docs.woocommerce.com/document/editing-product-data-tabs/

    2. Please use this css code:

    .page-heading .woocommerce-breadcrumb {
        font-size: 15px !important;
        font-family: "Open Sans"
    }
    .page-heading a {
        color: white !important;
    }

    Best regards,
    Jack Richardson.

    Avatar: irish
    irish
    Participant
    January 3, 2017 at 13:59

    Hi Jack,

    2. Sorry it does not work and i don’t understand. But maybe we can do it different. I just want to have the title on the left of the screen. When i do that in Theme Options, the layout changes, and i don’t want it to change.
    So can you maybe give me a CSS for the text to the left?

    3. I bought and installed this plugin: https://woocommerce.com/products/variation-swatches-and-photos/
    But when adding a custom color or image to the variations, it’s not showing in the shop sidebar + the product page. How can i fix this?

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    January 3, 2017 at 14:15

    Hello,

    Try to add this code in Custom CSS:

    .bc-type-1 {
        text-align: left;
    }
    .page-heading .title {
        text-align: left;
        margin-left: 0;
    }

    Please read this topic https://www.8theme.com/topic/woocommerce-variation-swatches-and-photos/

    Regards,
    Rose Tyler.

    Avatar: irish
    irish
    Participant
    January 3, 2017 at 14:22

    Hi Rose,

    Yes read it but it does not work for me. Actually, also on this page: http://cosplayclues.nl/product/bleu-pink-wig-cosplay-kopie/ when using the variations, the cart-button changed in colours….

    Avatar: Eva
    Eva Kemp
    Support staff
    January 4, 2017 at 17:28

    Hello,

    Have you tried to disable Ajax “Add to Cart” in Theme Options > Single Product Page > Ajax “Add to Cart” > Off?

    Looking forward to your reply.

    Regards,
    Eva Kemp.

    Avatar: irish
    irish
    Participant
    January 4, 2017 at 17:44

    Hi Eva,

    Yes i did… it’s stil off…

    Avatar: Eva
    Eva Kemp
    Support staff
    January 5, 2017 at 17:29

    Hello,

    Could you please show a page where variations aren’t shown?

    Thank you.
    Regards,
    Eva Kemp.

    Avatar: irish
    irish
    Participant
    January 6, 2017 at 09:24
    Avatar: Eva
    Eva Kemp
    Support staff
    January 6, 2017 at 09:52

    Hello,

    I’ve added custom colors to that product http://storage9.static.itmages.com/i/17/0106/h_1483692715_3652725_93fb209b2e.jpeg .
    Please check it now.

    Regards,
    Eva Kemp.

    Avatar: irish
    irish
    Participant
    January 6, 2017 at 12:32

    Hi Eva,

    Ah! Didn’t saw that option, sorry!

    1. But than an other thing. I used CSS for customising the colors for the “Add to cart” button at a single product page, but now the buttons are black/grey again…
    https://cosplayclues.nl/product/bleu-pink-wig-cosplay-kopie/ : here grey
    https://cosplayclues.nl/product/sarin-long-blue-ponytail-wig-cosplay/ : Here totally black

    How can i fix this?

    Avatar: Eva
    Eva Kemp
    Support staff
    January 6, 2017 at 17:16

    Hello,

    Please add this code in Custom CSS:

    .product-information .cart button[type="submit"] {
        color: white;
        background-color: black;
    }

    Set your color values.

    Regards,
    Eva Kemp.

  • 1 2 3
    Viewing 30 results - 1 through 30 (of 65 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.