Cart page remove product customisation

[stekats]

Hello I would like to make the X at the cart page smaller I have the following code but it doesn’t work.
Also when I the cart page is viewed on a mobile or a tablet the image of the product disappears I would like to be shown in every size.

[ruenel]

Hey Stella,

Thanks for writing in!

You are using the incorrect code. You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use. Therefore, the code should be:

[class*=woocommerce] .cart.shop_table .cart_item .product-remove a{
    font-size: 12px;
}

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Best Regards.

[stekats]

This code worked perfectly, and how about the image of he product it doesn’t show on smaller screens. it shows just on laptop and desktop.

[nabeel]

Hi Stella,

There must be a custom code which is hiding your product image, try remove custom CSS and deactivate your child theme and switch to parent theme (take a complete backup first of your custom code before removing).

If the issue persists then please provide the exact page URL so we can take a closer look. Thanks!

[stekats]

I don’t think it’s a custom code, I have tested removing all custom css but it still wasn’t showing in tablet and mobile view, this happened after the major update of X
the only code i could find that is relevant with the image of the product is the following:
.cart_item .product-thumbnail img {
max-width: 75px;
}
can you have a look the page is https://www.aquantum.gr/cart/ add a product from the shop https://www.aquantum.gr/shop/

[ruenel]

Hello Stella,

The image of the product does not display on smaller screens. This is intentionally made by WooCommerce. In the WooCommerce style.css, there is this code:

@media (max-width: 768px){
    .woocommerce #content table.cart .product-thumbnail, 
    .woocommerce table.cart .product-thumbnail, 
    .woocommerce-page #content table.cart .product-thumbnail, 
    .woocommerce-page table.cart .product-thumbnail {
        display: none;
    }

    .woocommerce table.shop_table_responsive tr td::before, .woocommerce-page table.shop_table_responsive tr td::before {
        content: attr(data-title) ": ";
        font-weight: 700;
        float: left;
    }
}

If you use the code above and modify it by display it as block and not displaying the later CSS block, therefore, you would have something like this code to display the product image:

@media (max-width: 768px){
    .woocommerce #content table.cart .product-thumbnail, 
    .woocommerce table.cart .product-thumbnail, 
    .woocommerce-page #content table.cart .product-thumbnail, 
    .woocommerce-page table.cart .product-thumbnail {
        display: block;
    }

    .woocommerce table.shop_table_responsive tr td::before, .woocommerce-page table.shop_table_responsive tr td::before {
        display: none;
    }
}

You can add this CSS code into X > Theme Options > CSS.

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Hope this makes sense. Thanks.

[stekats]

Thanks Rue! that did the trick just one more question how to place the photo and the product name to be horizontally aligned?

[ruenel]

Hello Stella,

You can add text-align: right; to the previously given code. The image should be aligned to the product title.

Regards.

[stekats]

I added it but nothing changed

[marc_a]

Hi Stella,

You can add this code under your max-width media 768px.

.woocommerce table.shop_table_responsive tr td.product-name,
.woocommerce table.shop_table_responsive tr td.product-price,
.woocommerce table.shop_table_responsive tr td.product-quantity,
.woocommerce table.shop_table_responsive tr td.product-subtotal {
	display: inline-block;
}

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps.

Thank you.

[stekats]

Hi Marc, the code you game me aligned it vertically I would like it to be horizontally aligned please.

[prakash_s]

Hello Stella,

To align the product thumbnail horizontally with the product title on the cart page. You can add this custom CSS under X/Pro--->Theme option --->CSS

@media(max-width:768px){
.woocommerce #content table.cart .product-thumbnail, .woocommerce table.cart .product-thumbnail, .woocommerce-page #content table.cart .product-thumbnail, .woocommerce-page table.cart .product-thumbnail {
display: inline-block;
}
}

The output of the custom CSS code would be like this on the small devices

Please note that you need to purge all the cache and clear your browser cache the see the proper effect of the code.

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

[stekats]

Thank you that’s better!

[marc_a]

Hi Stella,

You’re welcome and it’s our pleasure to help you. If you have any other concerns regarding our theme features, feel free to reach us.

Thank you.