modifying cart widget

hi there

Ok I want to remove the empty cart and checkout buttons from the cart widget on this page

http://www.shopcreativebarbados.com also I need to fix the spacing and enlarge the images as it currently looks crazy on the site and even worse on mobile

i also want to remove the gray back ground as well as it seems to be clashing with the images

you will have to add some item s to cart here

https://shopcreativebarbados.com/global-store/category/mens-clothing/

regards

  • Nithin

    Hey antony,

    I want to remove the empty cart and checkout buttons from the cart widget on this page

    Please try the following CSS:

    #mp_cart_widget-2 .mp_cart_widget_content > a.mp_button-widget-cart {
    	display: none;
    }

    I need to fix the spacing and enlarge the images as it currently looks crazy on the site and even worse on mobile

    .mp_mini_cart_item-has-image .hmedia {
    		max-width: 100px;
    		width: 35%;
    	}
    	.mp_mini_cart_item-has-image .hmedia img {
    		width: 100px;
    	}

    i also want to remove the gray back ground as well as it seems to be clashing with the images

    .mp_widget_cart .mp_mini_cart_item:nth-child(even) .mp_mini_cart_item-link, .mp_widget_cart .mp_mini_cart_item:nth-child(odd) .mp_mini_cart_item-link {
    	border: none;
    	background: none;
    }

    Since your previous thread is quite similar, and you have requested more changes in this new therad, I'm closing the older thread:
    https://premium.wpmudev.org/forums/topic/modifying-cart-widget

    Would recommend you, not to create multiple threads related to the same topic, please remove the CSS which I have shared in the previous thread, so that the current changes work:
    https://premium.wpmudev.org/forums/topic/modifying-cart-widget#post-1210890

    The final CSS would be as follows:

    @media screen and (min-width: 480px) {
    
    	.mp_widget_cart .mp_mini_cart_item {
    		width:26%;
    		float: left;
    	}
    }
    
    	#mp_cart_widget-2 .mp_cart_widget_content > a.mp_button-widget-cart {
    		display: none;
    	}
    
    	.mp_widget_cart .mp_mini_cart_item:nth-child(even) .mp_mini_cart_item-link, .mp_widget_cart .mp_mini_cart_item:nth-child(odd) .mp_mini_cart_item-link {
    		border: none;
    		background: none;
    	}
    
    	.mp_mini_cart_item-has-image .hmedia {
    		max-width: 100px;
    		width: 35%;
    	}
    	.mp_mini_cart_item-has-image .hmedia img {
    		width: 100px;
    	}

    You just only have to copy the above CSS, and then add it using Custom CSS box(if your theme offers), or either using a Child theme, or a plugin like Simple Custom CSS.

    Please advise if I'm missing out anything, have a nice weekend. :slight_smile:

    Kind Regards,
    Nithin

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.