Center thumbnails in product page and add border

Hi I want to centre the product thumbnails in product page also want to add border around it , the thumbnails are on the left I want to keep it in left but should be centered

Hi sohail,

Thanks for reaching to us.

Please try to use the below custom CSS code and paste it to Theme Settings > Custom CSS > CSS for desktop section:

	.thumbs-position-left.woocommerce-product-gallery .wd-gallery-thumb{
		border: 1px solid #000;
	}
	
	.thumbs-position-left.woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-wrap{
		justify-content: center;
	}	

Regards,

hi thanks this below code worked and now the thumbnails are in the center

.thumbs-position-left.woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-wrap{
justify-content: center;
}
but the border isnt working I want too have a border for each thumnail seperately the border is apllied to all thumbnails not individually

Hi sohail,

Please remove this part

	.thumbs-position-left.woocommerce-product-gallery .wd-gallery-thumb{
		border: 1px solid #000;
	}

And use below one

.thumbs-position-left.woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item{
	padding: 0 2px;
	border: 1px solid #000;
	margin-bottom: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.thumbs-position-left.woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item img{
	margin-bottom: 0;
}

Regards,

hi thank you it worked 🙂

Hi sohail,

Glad to hear your issue has been resolved. Keep us in mind for future questions and concerns, we’re always here to help!

If you have a quick minute we always appreciate a 5-star rating on our theme!

https://themeforest.net/item/woodmart-woocommerce-wordpress-theme/reviews/20264492

Your feedback is the motivation to improve our work and services.

Regards,

[Author]

Posts