How to remove WooCommerce shop images? - wordpress

I'm trying for few hours now to disable the images from my woocommerce shop but couldn't find any solution yet, here's a screenshot of how the shop page (not product page) is looking now and what I want to remove:
https://imgur.com/XEELei1
I've already tried adding:
// Remove product images from the shop loop
remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
// Remove sale badges from the shop loop
remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 );
In functions.php, but that image is still there.
Thank you.

Try below code if it is shop page
function before_imageless_product() {
if( !has_post_thumbnail( get_the_id() ) ){
remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
echo '<div class="no-image">';
}
}
add_action( 'woocommerce_before_shop_loop_item', 'before_imageless_product', 9 );
function after_imageless_product() {
if( !has_post_thumbnail( get_the_id() ) ){
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
echo '</div>';
}
}
add_action( 'woocommerce_after_shop_loop_item', 'after_imageless_product', 9 );

This solved the problem:
.products .box-image {display:none;}
.products .product-small .box-text {display:flex!important; }
.products .product-small .price-wrapper {margin:20px;}

Related

remove breadcrumbs from checkout page storefront theme woocommerce

I have tried to remove the breadcrumbs from just the 'checkout' page on woocommerce with the Storefront theme. I have looked at numerous ways on here and else where but none seem to work. Any suggestions woul dbe appreciated.
Here is a couple of different codes I have tried. Where am I going wrong?
add_action( 'init', 'wc_remove_storefront_breadcrumbs');
function wc_remove_storefront_breadcrumbs() {
if (is_page('checkout')){
remove_action( 'storefront_before_content', 'woocommerce_breadcrumb', 10 );
}
}
add_action( 'init', 'wc_remove_storefront_breadcrumbs');
function wc_remove_storefront_breadcrumbs() {
if (is_checkout()){
remove_action( 'storefront_before_content', 'woocommerce_breadcrumb', 10 );
}
}
Try with the following, as maybe 'init' is the wrong hook to use there:
add_action( 'storefront_before_content', 'bbloomer_remove_storefront_breadcrumbs_checkout', 1 );
function bbloomer_remove_storefront_breadcrumbs_checkout() {
if ( is_checkout() ) {
remove_action( 'storefront_before_content', 'woocommerce_breadcrumb', 10 );
}
}

How to remove gutenberg_render_title_tag from theme function file?

I have try remove action but not working.
add_action( 'wp_loaded', 'remove_my_action' );
function remove_my_action() {
remove_action( 'wp_head', 'gutenberg_render_title_tag', -1 );
}
or
add_action( 'init', 'remove_my_action' );
function remove_my_action() {
remove_action( 'wp_head', 'gutenberg_render_title_tag', -1 );
}
i am using yoast plugin. Yoast plugin also using remove action https://github.com/Yoast/wordpress-seo/blob/trunk/src/integrations/front-end-integration.php#L220 but it's not working. Still tag coming two time. i wants to remove gutenberg title tag.
I got the solution for this.
add_action( 'wp', 'remove_default_guten_title' );
function remove_default_guten_title() {
foreach ( gutenberg_get_template_type_slugs() as $template_type ) {
add_filter( str_replace( '-', '', $template_type ) . '_template', 'remove_default_title', 21, 3 );
}
}
function remove_default_title() {
remove_action( 'wp_head', 'gutenberg_render_title_tag', 1 );
return gutenberg_dir_path() . 'lib/template-canvas.php';
}

WooCommerce Shop page thumbnail wrap

I am looking at this: https://www.businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/
I would like to wrap thumb in shop page into another div.
If I use following code I could achieve something, but the problem is many themes remove or dont use woocommerce_before_shop_loop_item_title and use some different code and I cannot effectively do my action.
remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
add_action( 'woocommerce_before_shop_loop_item_title', 'my_woocommerce_before_shop_loop_item_title', 10 );
function my_woocommerce_before_shop_loop_item_title() {
global $product;
$post_id = $product->get_id();
$html = woocommerce_get_product_thumbnail('woocommerce_thumbnail');
echo '<div class="my">' . $html . '</div>';
}
Is there action or hook that processes product thumbnail to which I could do my own action? Regardless of what is happening before and after that?
Please try to implement in this way.
//replace the functionprefix with your functions prefix
function functionprefix_wrap_loop_product_image() {
if ( ! class_exists( 'WooCommerce' ) ) return; //* exit if WooCommerce not active
add_action( 'woocommerce_before_shop_loop_item_title' , 'functionprefix_product_loop_image_wrapper_open', 10 );
add_action( 'woocommerce_shop_loop_item_title' , 'functionprefix_product_loop_image_wrapper_close', 10 );
}
add_action( 'woocommerce_before_shop_loop' , 'functionprefix_wrap_loop_product_image', 3 );
//replace the functionprefix with your functions prefix
function functionprefix_product_loop_image_wrapper_open() {
echo '<div class="image-wraper">';
}
function functionprefix_product_loop_image_wrapper_close() {
echo '</div>';
}

Remove add to cart button from shortcode in woocommerce

I am implementing a shop that only allows logged in users to view the add to cart buttons.
I have successfully hidden most of them with the following code:
function thread_remove_loop_button(){
if(!is_user_logged_in() ){
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart' );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
}
}
add_action('init','thread_remove_loop_button');
However, there are still some showing in the New Products & Best seller widgets. Looking at the code, I can see these are calling the shortcode
do_shortcode('[add_to_cart id="'.$product->id.'"]');
What is the best way to amend these so the add to cart button only shows for logged in users. Obviously in the template I can do something along the lines of
if(is_user_logged_in())
echo do_shortcode('[add_to_cart id="'.$product->id.'"]');
}
but it seems like there should be a better way? Along the lines of a hook or something?
add_action('init', 'bbloomer_hide_price_add_cart_not_logged_in');
function bbloomer_hide_price_add_cart_not_logged_in() {
if ( !is_user_logged_in() ) {
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
add_action( 'woocommerce_single_product_summary', 'bbloomer_print_login_to_see', 31 );
add_action( 'woocommerce_after_shop_loop_item', 'bbloomer_print_login_to_see', 11 );
}
}
function bbloomer_print_login_to_see() {
echo '' . __('Login to see prices', 'theme_name') . '';
}
put this in your plugins/woocommerce/woocommerce.php
it will hide the price and add to cart button and print a statement login to see price
The add to cart template function is pluggable, meaning that if you define a function in your theme with the same name it will override that of WooCommerce.
function woocommerce_template_loop_add_to_cart( $args = array() ) {
if(is_user_logged_in()){
wc_get_template( 'loop/add-to-cart.php' , $args );
}
}
You need to use hook which not affect other code.
add_action('init', 'hide_add_cart_not_logged_in');
function hide_add_cart_not_logged_in() {
if (!is_user_logged_in()) {
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
}
}
that only allows logged in users to view the add to cart button.
Here you can get WooCommerce Action and Filter Hook
-https://docs.woothemes.com/wc-apidocs/hook-docs.html

Woocommerce making sidebar appear at the bottom of the page

I installed woocommerce on a non woo theme, I wish to style it, without much change. But when I installed it, the sidebar is displayed out of any container (widgets are shown in their divs but without a wrapper). Now I used
add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);
function my_theme_wrapper_start() {
echo '<section id="main">';
}
function my_theme_wrapper_end() {
echo '</section>';
}
From the documentation, and this works for woocommerce just fine. But my sidebar is still at the bottom, without a wrapper. Is there a way to wrap the sidebar as well, and place it next the content of the shop, using just hooks, not copying any files out of the plugin?
I figured it out, this is a 'framework' that works for me, in case anybody needs it:
<?php
if (!function_exists('custom_open_woocommerce_content_wrappers')) {
function custom_open_woocommerce_content_wrappers(){
echo '<div class="container shop_container"><div class="row">';
}
}
if (!function_exists('custom_close_woocommerce_content_wrappers')) {
function custom_close_woocommerce_content_wrappers(){
echo '</div></div>';
}
}
if (!function_exists('custom_product_wrapper_open')) {
function custom_product_wrapper_open(){
echo '<div class="span8 content_with_right_sidebar">';
}
}
if (!function_exists('custom_product_wrapper_close')) {
function custom_product_wrapper_close(){
echo '</div>';
}
}
if (!function_exists('custom_before_shop_loop_sidebar')) {
function custom_before_shop_loop_sidebar() {
echo '<aside class="span4 sidebar sidebar_right">';
dynamic_sidebar(get_theme_mod('shop_sidebar', ''));
echo '</aside>';
}
}
add_action( 'woocommerce_after_shop_loop', 'custom_before_shop_loop_sidebar', 20);
if (!function_exists('custom_prepare_woocommerce_wrappers')) {
function custom_prepare_woocommerce_wrappers(){
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10 );
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);
remove_action( 'woocommerce_before_shop_loop', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_shop_loop', 'woocommerce_output_content_wrapper_end', 10);
add_action( 'woocommerce_before_main_content', 'custom_open_woocommerce_content_wrappers', 10 );
add_action( 'woocommerce_after_main_content', 'custom_close_woocommerce_content_wrappers', 10 );
add_action( 'woocommerce_before_shop_loop', 'custom_product_wrapper_open', 10 );
add_action( 'woocommerce_after_shop_loop', 'custom_product_wrapper_close', 10 );
}
}
add_action( 'wp_head', 'custom_prepare_woocommerce_wrappers' );
This will create a wrapper with a right sidebar. You can customize it further if you need to. Hope it helps.

Resources