Return to previous page

Cosplay webshop - by irish - on WordPress WooCommerce support

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

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 🙂

#149032 Copied

64 Answers

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.

#149064 Copied

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.

#149127 Copied

Eva Kemp

Support staff

December 15, 2016 at 11:49

Hello,

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

Regards,
Eva Kemp.

#149171 Copied

irish

Participant

December 15, 2016 at 16:21

Oh how stupid! See private content

Please, contact administrator
for this information.

#149199 Copied
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.
#149202 Copied
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

#149263 Copied
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.
#149266 Copied
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?

#149615 Copied
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.
#149619 Copied
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?

#149621 Copied
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.
#149639 Copied
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?

#149640 Copied
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.
#149641 Copied
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 🙁

#149739 Copied
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.
#149783 Copied
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?

#150740 Copied
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.
#150743 Copied
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?

#150749 Copied
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.
#150751 Copied
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?

#150758 Copied
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.
#150759 Copied
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….

#150761 Copied

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.

#150883 Copied

irish

Participant

January 4, 2017 at 17:44

Hi Eva,

Yes i did… it’s stil off…

#150886 Copied

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.

#150975 Copied

irish

Participant

January 6, 2017 at 09:24

Hi Eva,

For example: https://cosplayclues.nl/product/bleu-pink-wig-cosplay-kopie/

#151023 Copied

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.

#151026 Copied

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?

#151059 Copied
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.
#151087 Copied
1 2 3

Viewing 30 results - 1 through 30 (of 65 total)