I am working on the cart page for my site and I have a question. I want to try and hide the subtotal after each product price BUT still keep the total cart subtotal. I added a screenshot as a reference below. Any help would be fantastic!
annotated screenshot
This could be accomplished by CSS.
eg.
.woocommerce table.cart td:nth-of-type(6), .woocommerce table.cart th:nth-of-type(6) {
display: none;
}
As explained here: https://www.businessbloomer.com/woocommerce-hide-column-cart-table/
Related
Currently I have coupons that get applied automatically based on a functions.php script I made. I'm trying to remove the Coupon Field entirely from the Cart page but can't figure out how to. I tried the script mentioned elsewhere as shown below:
/ hide coupon field on cart page
function hide_coupon_field_on_cart( $enabled ) {
if ( is_cart() ) {
$enabled = false;
}
return $enabled;
}
add_filter( 'woocommerce_coupons_enabled', 'hide_coupon_field_on_cart' );
The problem is since this disables the coupons while in the cart then it also removes the discounts I created for the customer and won't show any of their discount on the Cart page. It would confuse the customers. How else can I hide or remove this Apply Coupon field on the Cart page? Would I need to use CSS or create a child theme for the cart file?
Is there any hook I could use to just use a remove_action on the hook like there is on the checkout page?
Thanks in advance.
You can use this CSS code:
.woocommerce #content table.cart td.actions .coupon, .woocommerce table.cart td.actions .coupon, .woocommerce-page #content table.cart td.actions .coupon, .woocommerce-page table.cart td.actions .coupon {
display:none;
}
As with most things in woocommerce we can hide it easily through CSS. The answer by Ali did not work for me though. If you're using .woocommerce-info for other stuff on your cart/checkout, you can try to remove that class. The code below does the job for my application.
/* https://stackoverflow.com/posts/54695722 */
.woocommerce-checkout .coupon-wrapper .woocommerce-info {
display: none;
}
Please note though that this does not disable or prevent users from adding coupons. People with some tech knowledge can still work around this by inspecting the page and disable the css rule to then apply coupons regardless. This code just hides the field for regular users.
The field may also show up during initial page load depending on cache settings and if the css is served critical or not. Please use at your own discretion.
Remember to purge your cache.
I'm new to coding, very new and have some code that I believe needs to be added to "custom CSS" in my e-commerce site. This is to remove the issue of bullet points appearing on the top left of products (screenshot attached), when using the product category field with woocommerce.
I've done this through my theme but it doesn't work. Any ideas?
thank you! Such a huge learning curve and I appreciate the help.
Snapshot of dots on product pages
Please add in /new/bouquets/inspector-stylesheet.css
.woocommerce ul li { list-style:none !important;}
or
.woocommerce .item { list-style:none !important;}
I'm using WordPress + WooCommerce and I'd like to remove the product title in the display product page. In particular I'd like to show the product thumbnail only.
However, the product title should be visible in the single product page.
Suggestions? Is it possible? Thank you in advance!
Adding
ul.products h3
{
display: none;
}
to the style.css on your website should hide the title of the product, but not on the single product page.
According to the latest WooCommerce version, following CSS hide product title in archive page
ul.products h2.woocommerce-loop-product__title {
display: none;
}
I have installed wooCommerce plugin in WordPress, then activated the "Twenty Thirteen" theme and have added 4 products.
Does anybody please know how to fix the problem, that the products are show too close and their "Add to basket" labels overlap (at least in Russian language, here fullscreen)?
I have tried different widget configurations, like removing the basket from the right side - this doesn't help.
If needed, I'm comfortable with editing JS, CSS and PHP files - but don't know WordPress well.
There are many ways that you could fix this layout issue, but here's a quick fix for you.
Add this to your css:
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
min-width: 220px;
}
This isn't a perfect solution, and a look at your actual image sizes and desired output would help to make this work better, but this will fix your issue.
Another possible solution is to use the shortcode in the template file for your shop and limit the output to 3 columns.
<?php echo do_shortcode('[products ids="1, 2, 3, 4, 5" columns="3"]');?>
As mentioned in another answer, to directly change the number of columns without creating a custom template for the shop page:
add_filter( 'loop_shop_columns', function() { return 3; } );
Add this to your functions.php file within your theme.
To change the number of products per row use loop_shop_columns filter.
/* functions.php */
add_filter( 'loop_shop_columns', function() { return 3; } );
But that still will not solve the problem, you will probably have to override WooCommerce styles for button and product list elements ( note that first and last elements in the row have specific CSS classes 'first' and 'last' ).
This is what I did to move the products apart.
Add this to your css:
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
padding: 15px;
}
I know, this is a simple fix (it has to be), but I have been searching for two days and haven't been able to accomplish this. The products in the catalog page of my site are too small.
Here is my site: http://monocleprints.com/woo/shop/
I have tried all the back-end things I can think of:
changing the sizes in WooCommerce -> Settings -> Catalog
resizing all the thumbnails with the Thumbnail Regenerator plugin
resizing with the Simple Image Sizes tool (in the Media folder)
I realize that I might need to edit the css. Where would I go to do that?
There is probably better way to do this but you could try this:
Go to plugins > Editor > Select woocommerce plugin and open
/assets/css/woocommerce.css
Find this:
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product
and change width to a larger percentage.
If you are using a woocommerce theme you should check in the themes directory for woocommerce config files. These config files usually do the final styling on the images. For example, the file might be your_theme/config-woocommerce/config.php wherein you would find something like:
//product thumbnails
$avia_config['imgSize']['shop_thumbnail'] = array('width'=>80, 'height'=>80);
$avia_config['imgSize']['shop_catalog'] = array('width'=>450, 'height'=>355);
$avia_config['imgSize']['shop_single'] = array('width'=>450, 'height'=>355);
When in doubt, consult your theme's website/support forum as the question was probably already asked there.
I have spent too much time today trying to figure out how to change the size of the thumbnails in the shopping cart and finally succeeded using CSS as follows:
.woocommerce table.cart img, .woocommerce #content table.cart img,
.woocommerce-page table.cart img, .woocommerce-page #content table.cart img {
width: 90px;
height: auto;
padding: none !important;
}
I hope that helps for you!
Settings for this have been moved to the Theme Customizer.
Design -> Customizer -> WooCommerce -> Productimages
There is one setting for product pages and another for catalogue pages.
Tested in WooCommerce 3.3.3
I was going trough the same problem, and I've found a possible solution for it.
Open the page where the image size is being changed, find the loop, e.g:
if ( have_posts() ) : while ( have_posts() ) : the_post();
// Loop code, thumbnail woocommerce function, etc
endwhile; endif;
and replace it with the code below:
query_posts($args); // Note: if there's no arguments for the query, it can be empty
//loop code, call the default thumnail function! the_post_thumnail()
rewind_posts();