Make Woocommerce remove button (cart) align with product name on mobile devices

Hi Mike,

Can you link me to the page in question?

You can use the private info field.

Let me know :)

Hi Ying,

thank you! Since this site is still under construction, I put the URL in the private field. The site is in german, but you won't have any difficulties, I guess. I checked it out on another test installation with just GP, no child theme, no other plugins activated, and it is the same there.

I've just found out that the media query is actually in Woocommerce:

media=only screen and (max-width: 768px) {
.woocommerce table.shop_table_responsive tr td, .woocommerce-page table.shop_table_responsive tr td {
    display: block;
    text-align: right!important;
}
}

I do understand that this is probably beyond the scope of a support forum.

Thanks, Mike

Media query at around this width is difficult to define as mobile devices' sizes are vary.

I think you solution would be write another piece of CSS to override this one :)

OK, that was a tricky one. CSS only didn't do the trick. It simply didn't look good to have the remove icon before the table header containing the product name. I decided to do it another way. Firstly, I modified the cart.php template so, that the remove link contains some text including the product name and a CSS class:

'<a href="%s" class="remove" aria-label="%s" data-product_id="%s" data-product_sku="%s">
&times; <span class="woo-remove-mobile">Remove %s</span></a>',
esc_url( wc_get_cart_remove_url( $cart_item_key ) ),
esc_html__( 'Remove this item', 'woocommerce' ),
esc_attr( $product_id ),
esc_attr( $_product->get_sku() ),
esc_attr( $_product->get_name() )

It took quite some CSS to remove the additional info on devices >768px and make everything look pretty:

.woocommerce a.remove {
  display: block;
  font-size: 1.5em;
  height: 1em;
  width: 100%;
  text-align: left;
  line-height: 1;
  border-radius: 100%;
  color: var(--error-color) !important;
  text-decoration: none;
  font-weight: 700;
  border: 0 !important;
}

@media screen and (min-width: 768px) {
  .woocommerce a.remove {
    width: 1em;
    text-align: left;
  }
  .woo-remove-mobile {
    display: none;
  }
}

.woo-remove-mobile {
  font-size: var(--small-font-size);
  color: var(--lighter-grey-text-color);
  margin-left: 0.5em;
  font-weight: normal;
}

Not too bad.

Mike

Glad you worked your way out :)