Remove items from Cart button not displayed

[gimmechefs]

Hi Guys. Im using the crafty install. On the cart page, there is no “x” trigger to remove an item from the cart.

When i revert to twenty20, the “x” is displayed and functions correctly. Woo suggested that it is something to do with the theme. I really need this x funtion. Any advice will be greatly appreciated.

Best
Max

[friech]

Hi Max,

Thank you for writing in, yes there seems to be a tiny CSS conflict on the crafty demo. To fix that, please add this to the Theme Options > CSS

/*Cart page remove item temp fix*/
.woocommerce td.product-remove {
	display: table-cell !important;
}
.woocommerce td.product-remove a.remove {
	color: red;
}

Have a nice day,
Cheers!

[gimmechefs]

Thats awesome. Thanks for that. I also see that there is mo sort by dropdown option (a-z) (recent) etc etc.

Can you please help with this.

Thanks

[gimmechefs]

Sorry mate. I just realised that the temp fix throws out the cart headings…

Please see image attached.

[christian]

Hey @gimmechefs,

It’s only natural the the content will be shifted to make space for the “remove” button. We can’t changed that bit. Please also remove the temp fix when an update is available so that there’s no chance of conflict.

Regarding the dropdown/sort option, WooCommerce doesn’t really have that functionality so you need to find a plugin for that or consult with a developer to create a custom function for you.

Thanks.

[gimmechefs]

Hi Christian. I have come a long, long way down the crafty road, im talking weeks. I really dont want to start over with another template for these two glitches.

1. RE The table colums being thrown out due to the adding the “remove from cart icon” (see above). I have put your temp fix in child theme css. Can you give me please the snippet to line up the columns ? Again, ill place it in child theme.
   Perhaps a good fix would be to place the “x” on top of the image itself. (top right of the image (whiite bg, color red)?

2. RE The woocommerce sort by dropdown. This comes standard with a woocommerce install. With crafty shop, themeco has not put it in. I need that in there. Is there a function i could add to child theme functions.php? along with cs

   
   s styles for styles.css ?

Please see image attached.

Cheers

[friech]

Hi @gimmechefs,

Now that I’ve imported this demo on my local dev to see what was really going on. The two things that you mentioned above was not really an issue but intentional, the Crafty demo is minimalistic in design so hiding the “remove item” and “sorting dropdown” make sense.

Now if you want to have the “remove item” and “sorting dropdown” back, please navigate to Theme Options > CSS, first please remove the temporary fix I provided above.

Then find this block:

/* Hidden Elements
// ------------------------ */

.description_tab,
a.entry-thumb:hover:before,
.woocommerce .product-remove,
.x-recent-posts .x-recent-posts-date,
.woocommerce li.product .entry-header .button,
.woocommerce li.product:hover .entry-header .button,
.x-recent-posts a:hover .has-post-thumbnail .x-recent-posts-img:after,
.x-recent-posts a:hover .has-post-thumbnail .x-recent-posts-img:before,
.blog .x-main.full > article:not(:first-child) .entry-wrap .entry-content.excerpt {
  display: none !important;
}

From that block remove or comment out the line .woocommerce .product-remove, that for the “remove item (x)”

Next find this block:

.woocommerce-result-count,
.woocommerce-ordering {
  opacity: 0;
}

And remove or comment out that block, that is for the sorting dropdown.

Now, I notice on your screenshot that there is customization going on your site that is not part of the Crafty demo, for example that orange background on remove (x) icon, in the actual demo that is not how it looks. In the demo its a simple little x icon.

Hope it helps,
Cheers!

[gimmechefs]

Hi Christian. I understand the process now.

Most of the design tweaks are in the css file. I can make my changes myself there. No probs.

So, finally. On the woocommerce shop page, there is a spinning icon when a product is added to the enduser’s cart.

Now, I had to build a page in Pro with the woocommerce shortcode [products].

I did this in order to be able to display the off canvas cart, as per my previous advice from themeco the other day.

All good, looks perfect, but… The icon that spins when a product is added to a cart does not function on the “Pro built” page.

It does function on the woocommerce “shop” page, “category archive” pages.

With the Pro built page with [products] shortcode, it is confusing for end user when they click on add to cart, and there is no interaction.

Could you please advise as to how i get the icon as per this image, included in my “Pro Page” build.

Cheers
Max

Please see image.

[friech]

Hi Max,

Unfortunately that AJAX add to cart buttons features only works on Shop page and archive pages, but not on standard pages.

It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. Pro is quite extensible with child themes, so there are plenty of possibilities.

Thank you for understanding,