Increasing the Addon Product Image Size in CSS

Description:

1. This section provides a CSS solution to adjust the size of the addon product images on your website.
2. By using specific CSS code, you can easily modify the default size of these images, ensuring they are displayed in a larger, more prominent manner that better suits your design preferences.
3. The approach is simple, and you don’t need to modify the HTML structure. Instead, the CSS targets the image elements directly.

To increase the addon product’s image size

.wcpb-container .wcpb-addon-box-wrap .wcpb-addon-box-items .wcpb-addon-box-item .wcpb-addon-image img {
    width: 110px;
}

To remove read more link for CPB product short description:-

.wcpb-desc-content {
    height: auto !important;
}

.wcpb-product-description .wcpb-more, .wcpb-product-description .wcpb-less {
    display: none !important;
}

To change the colour and background of all the CPB buttons

.cpb-button, #add_to_cart_button, .single_add_to_cart_button, .cpb_add_to_cart_button {
    background-color: #1a95bc !important;
    color: #fff !important;
    border: 1px solid #1a95bc !important;
}

To make the scrollbar thin

.wcpb-gift-box-items::-webkit-scrollbar, .wcpb-addon-box-wrap::-webkit-scrollbar, .wcpb-added-products::-webkit-scrollbar{
    width: 5px;
}
.wcpb-gift-box-items::-webkit-scrollbar-thumb, .wcpb-addon-box-wrap::-webkit-scrollbar-thumb, .wcpb-added-products::-webkit-scrollbar-thumb {
    background: #9E9E9E;
    border-radius: 10px;
}

To change the colour of the read more/show details link:-

.wcpb-product-details-wrap .wcpb-product-details .wcpb-more, .wcpb-product-details-wrap .wcpb-product-details .wcpb-less, .wcpb-container .wcpb-addon-box-wrap .wcpb-addon-box-items .wcpb-addon-box-item .wcpb-addon-details{
	color: #1A95BC;
}

To change the colour of the reset box text

.wcpb-container .wcpb-gift-box-content .wcpb-top .wcpb-reset{
	color: #1A95BC;	
}

To change the background colour and text colour of the top blue bar

.wcpb-container .wcpb-msg{
    background-color: #1A95BC;
    color: #ffffff;
}

To change the colour of the view price details link

.wcpb-vertical .wcpb-sticky-footer .wcpb-footer-container .wcpb-footer-content .wcpb-price-text{
	color: #1A95BC;
}

To make all the product images circular

.wcpb-addon-image img{
	border-radius: 50%;
}

To change the colour of add/plus/minus button

.wcpb-container .wcpb-addon-box-wrap .wcpb-addon-box-items .wcpb-addon-box-item .wcpb-addon-add{
	color: #108C1C;
}
.wcpb-container .wcpb-addon-quantity-box .wcpb-plus{
	color: #108C1C; //plus button
}

.wcpb-container .wcpb-addon-quantity-box .wcpb-minus{
	color: #108C1C; //minus button	
}

To change the colour of the product title

.wcpb-container .wcpb-addon-box-wrap .wcpb-addon-box-items .wcpb-addon-box-item .wcpb-addon-title{
	color: #000000;
}

To change the colour of the price

.wcpb-container .woocommerce-Price-amount{
	color: #ee9823 !important;
}

To change the color of the description

.wcpb-container .wcpb-addon-box-wrap .wcpb-addon-box-items .wcpb-addon-box-item .wcpb-addon-desc, .wcpb-product-details-wrap .wcpb-product-details .wcpb-product-description{
	color: #444444;
}