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.
Related
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/
My problem is that there is a bullet above the checked pay method "Betaling via overschrijving", on my woocommerce checkout page, and I have no idea how to get rid of this extra bullet:
Here is my checkout webpage. You may have to place something into the cart for it to work.
Any help is appreciated
You need to add in your active child theme (or active theme) styles.css file the following rule:
.wpb_text_column ul.payment_methods li {
list-style-type: none !important;
}
It will remove the undesired small bullet from payment methods...
By default on the right side of single product it shows sidebar. The point is that we need side bar only on the Shop page where are located all products. It includes all filters as well as rated products. But on the single product description page we want to remove right side bar. Because in that page it shows only rated products in sidebar. It was there by default. Is there any way to remove it from that page?
This solution i create in 2021 works very good (sorry my english)
/*Single product page no sidebar*/
#blog #sidebar {
display: none;
}
#blog .col-md-push-3 {
left: unset;
}
#blog .col-md-9 {
width: 100%;
}
put this code in main page css code
Visit https://rgrepairofice.ddns.net/loja/gta-v
to check result, if you like it do what i said above
Gaspar Pereira, from rgrepairofice
Currently in the file templates/single-product.php the sidebar is called
/**
* woocommerce_sidebar hook.
*
* #hooked woocommerce_get_sidebar - 10
*/
do_action( 'woocommerce_sidebar' );
Therefore you can remove it with remove_action('woocommerce_sidebar', 'woocommerce_get_sidebar', 10); or wrap it to make sure it only affects single product pages:
if ( is_product() ) {
remove_action('woocommerce_sidebar', 'woocommerce_get_sidebar', 10);
}
Here is the documentation for other conditional tags if you need to get rid of it somewhere else and it uses the same action: https://docs.woocommerce.com/document/conditional-tags/
It all depends on the theme that you are using, as sometimes there is even an option in the theme options or the Customizer for changing layouts to different pages.
Through code, you could probably replace the single-product.php with a page template file that has no sidebar and then reinsert the missing WooCommerce tags, so that WooCommerce does it's magic on the page.
You could try going to [project-name]/wp-content/themes/[theme-name]/woocommerce/single-product.php and look for this line:
do_action( 'woocommerce_sidebar' );
And remove the line or comment it out.
You can also remove the sidebar with CSS only and not touching the PHP files if you don't want to!
For example the following simple CSS codes work like a charm with the Storefront theme (currently that I'm writing this, the theme version is 4.1.0)
.single-product #primary {
width: 100%;
}
.single-product #secondary {
display: none;
}
You won't be able to accomplish this by default with WooCommerce and WordPress. However, it's easy to accomplish if you're not looking to dive into code. A popular choice is Widget Visibility by Jetpack. If you're looking to dive into code, I recommend asking a new question with more details on what you tried to do already.
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();