[Resolved] Been working with the plugin creator for 2 weeks.

[Matt]

I had the plugin creator try to fix an issue with the CSS they put into my custom.css file and they got it working for the most part. But the problem is… they see the products lined up and looking correctly but I don’t see the same thing. This is what I see. https://imgur.com/a/9x8UYXG They were using chrome and a 15″ monitor so they say and said they don’t see the issue. I am using chrome and a 15″ monitor and I see the issue no matter if I clear my cache on my browser and clear cache on wordpress. I would guess you see the issue also on your side if you do the same.

To recreate the issue:
1. Add any product to cart that isn’t under the Build your own duck call Category. (The product should look cut in half in mini cart.)
2. Then add a product from the duck call builder category and it will overlap over the other product that will now show fully other than being covered by the duck call builder.
3. If you clear the cart from the duck call builder product the item will go back to be cut in half.
4. Adding 2 of a none duck call builder product will cut in half 2 and squish them.

I am sure it’s probably their CSS code cause they showed me a screen shot of it looking normal on their screen shot. But they said they can’t fix it cause they can’t see the issue. Then they brought up a good point. If I disable their plugin does it fix the issue? I disabled it and cleared cache and the issue remains. So it’s not their plugin it’s just the CSS they can’t seem to fix cause they can’t recreate? I don’t know but I thought y’all might be able to help. Here is the custom.css file

/**custom CSS from VPC Creators**/
#wc-mini-cart{width: 500px;}
.woocommerce.widget_shopping_cart .cart_list li{padding: 0 0 0 10em !important;}
.mini_cart_item .vpc-cart-config-image {
left: 0 !important;
/*use if no other option
top: 55px !important;
*/
position: absolute !important;
}

.woocommerce ul.cart_list li img{
position: absolute !important;
width: 100px !important;
margin-left: auto !important;
margin-right: auto !important;
top: 15% !important;
}
.mini_cart_item .vpc-cart-config img {
left: initial !important;
}

/*my addition for VPC styling*/
#vpc-preview img {
border: 2px groove !important;
border-radius: 10px !important;
box-shadow: 2px 2px 7px 0 rgba(0,0,0,0.6) !important;
}

div.vpc-component-header img {
color: black !important;
border: 2px groove !important;
border-radius: 10px !important;
box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.6) !important;
}

div.vpc-component-header, span.vpc-selected.txt, div.vpc-group {
    color: #000000;
    background-color: #cfcfcf;
}
label.custom {
border: 1px solid black !important;
}
div.vpc-textarea-fields-wrap.vpc-options h5 {
background-color: #CFCFCF !important;
}

div.vpc-textarea-fields-wrap.vpc-options {
color: #000000 !important;
background-image: linear-gradient(green, black) !important;
}
/*rounds mini cart*/
li.woocommerce-mini-cart-item.mini_cart_item a {
padding: 3px !important;    
border-radius: 10px !important;
}
div.vpc-cart-config-image.o-wrap {
border-color: transparent !important;
}
div.vpc-cart-config-image.o-wrap img {
border-radius: 10px !important;
box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.6) !important;
}

I don’t know if you will be able to see the whole support link or not you might have to create an account to see the whole troubleshooting.
https://orionorigin.zendesk.com/hc/en-us/requests/465

Here is a video of me creating the problem: https://youtu.be/EFrMNgLUU68

[David]

Hi there,

try this CSS:

.woocommerce.widget_shopping_cart .cart_list li {
    min-height: 110px !important;
}

.woocommerce ul.cart_list li .vpc-cart-config-image img {
    margin-left: unset !important;
}

[Matt]

As always you nailed it. Thank you sir. Now the website is basically done.

[David]

You’re welcome

[Author]

Posts