Change UI displayed with WooCommerce

  • Resolved sydalynhill

    (@sydalynhill)


    2 years, 11 months ago

    I’m using WooCommerce to showcase inventory we have available. There are a few UI issues and changes I’d like help making…

    – Remove the yellow highlight on the # of items in each category. Keeping the number is fine, but I’d prefer not to have it highlighted in yellow.
    – Remove the “Read More” button from the Product pages.
    – Remove the “Photo Gallery” on the right side from the Product pages.
    – On the individual Product description page, make the other images in the Product Photo Gallery clickable. They are on mobile, not on desktop. On desktop, I’m only able to move from image to image by using the arrow key which is not intuitive.
    – Is there a way to include a bread crumb link back to the Category page? The individual Product page shows the Categories, but they are not linked back.

    Thank you for your help!!

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author Mystery Themes

    (@mysterythemes)

    Hello @sydalynhill

    You can use the following code in additional CSS box:

    .woocommerce-loop-category__title .count,
.woocommerce ul.products li.product .button.product_type_simple,
#secondary .widget_media_gallery{
	display: none;
}

.woocommerce #content div.product div.summary, 
.woocommerce div.product div.summary, 
.woocommerce-page #content div.product div.summary, 
.woocommerce-page div.product div.summary {
	float: none;
	display: inline-block;
	margin-left: 30px;
}

    Thanks

    Thread Starter sydalynhill

    (@sydalynhill)

    That is fantastic!! Thank you so much! It fixed everything but the last 2 items…

    – On the individual Product description page, make the other images in the Product Photo Gallery clickable. They are on mobile, not on desktop. On desktop (Mac), I’m only able to move from image to image by using the arrow key which is not intuitive.

    – Is there a way to include a bread crumb link back to the Category page? The individual Product page shows the Categories, but they are not linked back.

    Thanks, again, for all your help!!

    Theme Author Mystery Themes

    (@mysterythemes)

    Hello @sydalynhill

    You can use the following code in additional CSS box:

    .single-product .related.products {
	position: static;
}

    About linked back to the category page, it works for me while checking in various browsers.

    Thanks,

    Thread Starter sydalynhill

    (@sydalynhill)

    Excellent! That does the trick! Thank you! The Category links are also working for me now. All looks and works great. Thanks for your help!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Change UI displayed with WooCommerce’ is closed to new replies.