I have a Woocommerce store that is using Elementor mini cart.
I would like to add suggested products inside the mini cart, using this php code:
function content_below_products_minicart() {
echo 'You may also like these products';
echo do_shortcode('[products ids="13"]');
};
add_action( 'woocommerce_mini_cart_contents', 'content_below_products_minicart', 10);
And it works fine, but unfortunately the UI is not the best.
So I would like to customize the CSS but the styles of those products are the same as the product archive, so editing that CSS code will also modify the appearance of the products in the Archive.
How can I create an HTML Class that I can edit on its own?
Related
I'm trying to learn WordPress and developing custom plugins. I'm trying to make a custom plugin where it will display just the Product Image from the Woocommerce plugin to the page. I have 1 product, and I've been reading documentation and haven't really found anything that explains it clearly or works. This is all I have now
<?php
$gallery_shortcode = '[gallery id="' .intval($post->$post_parent).'"]';
print apply_filters('the_content', $gallery_shortcode);
?>
Honestly the question is not very clear, so I'll try to guess what you're looking for.
You can "get" a product image with this function:
woocommerce_get_product_thumbnail();
If you need it in a custom single product PHP template, simply:
echo woocommerce_get_product_thumbnail();
If you need it in a shortcode inside the single product page:
add_shortcode( 'product_image', 'bbloomer_product_image_shortcode' );
function bbloomer_product_reviews_shortcode() {
return woocommerce_get_product_thumbnail();
}
...and then use [product_image] shortcode to show the image
Tl;dr: I want to use similar functionality in WC shortcodes but within the WC shop page.
I have many custom Woocommerce shortcodes I have created. I use them throughout non-shop pages.
E.g:
function displayProductIngredients($item) {
$product = wc_get_product($item['id']);
return $product->get_attribute( 'ingredients' );
}
add_shortcode('product_ingredients', 'displayProductIngredients');
I would like to use them in the archive-product.php page too.
E.g. in the example this shortcode adds the content of the "ingredients" attribute. How can the same be added for each new product added?
Is this just a case of moving around some of the php? If so, how might it look?
Thank you very much.
I want to display a wordpress shortcode after the product title on my woocommerce products page.
Does anyone know how I can do this? I have looked all over but I cannot work out where or how to input this. All I keep doing is breaking the site :(
You can use woocommerce_template_single_title hook. Example is given below.
add_action('woocommerce_template_single_title', 'your_function');
function your_function(){
// Do your stuff
}
Woo Commerce doesn't have a shortcode for displaying a product name but you can easily create your own function.
function displayProductName($item)
{
$productName = get_the_title($item['id']);
return $productName;
}
add_shortcode('product_name', 'displayProductName');
Add the above code to your functions.php file and then use [product_name id="10"] to output the product title, where id is the id of the product in question. The above example uses the get_the_title() in-built WordPress function:
https://developer.wordpress.org/reference/functions/get_the_title/
I'm looking for some help in WooCommerce. I would like to hide the mini cart and topbar when there are no items in the cart (as it won't be used that often).
Below is the HTML output.
Is there some kind of "WooCommerce Hook" that needs to be added in functions.php?
Sorry, I don't even know what PHP files to look in to post any code snippets for this particular area, if they are required.
Please let me know if they are.
Thanks.
Your header.php file located in your main theme is displaying that Mini-cart. (Is better to use a child theme and to copy that file from the parent theme to the child theme, avoiding loose the customizations when updating main theme).
Editing that header.php file, you will have to use a simple condition around the code that is displaying Mini-cart, this way:
// If cart is not empty display the mini-cart
if(!WC()->cart->is_empty()){
// Here goes the code that display mini cart in your header
}
This should work, but if ajax is enabled for add-to-cart, the mini-cart will be displayed only moving to another page or refreshing the actual page.
ALTERNATIVE: THE EASY WAY (HIDDING WITH CSS)
Another alternative, should be to inject a CSS rule in html head, when cart is empty this way:
add_action('wp_head', 'hook_css', 99999);
function hook_css() {
// If cart is empty hide the mini-cart
if(WC()->cart->is_empty())
echo '<style type="text/css">#top > #cart{display:none !important;}</style>';
}
This code goes on function.php file of your active child theme (or theme) or in any plugin file.
The code works.and if you want to hide all the top bar (and the mini-cart at the same time), replace the css rule by (just removing > #cart):
#top{display:none !important;}
Fixed it thanks to your suggestion LoicTheAztec, played around with the code a little! Thanks.
<!-- TOPBAR -->
<?php if (sizeof(WC()->cart->get_cart()) != 0) { get_template_part( 'topbar' ); }?>
<!-- END TOPBAR -->
Here is a simple workaround which works for
the new mini cart "Gutenberg" block
and modern browsers supporting :has
(and the quantity is the first string in the aria-label)
.wc-block-mini-cart:has(.wc-block-mini-cart__button[aria-label^="0 "]) {
display: none;
}
I've seen many tutorials dealing on how to customize woocommerce's checkout page by adding or removing fields.
But what I want is to place a link or button on the Woocommerce Checkout page saying "Return to Cart" (obviously linking to the cart page) but I want it placed just after the "Your Order" section, (the section where you review your order). I want it there because I want it along with a text saying something like "If you want to change your order return to Cart".
If I edit the actual checkout page and add the link there, it shows all the way to the bottom so maybe I have to add code to the theme's functions file? Any guidance will be greatly appreciated.
Thank you.
EDIT:
Ok, I've found a very crappy way of doing it.
I just added this line to the review-order.php file located in woocommerce/templates/checkout/ , right after the shop_table class:
<?php echo "<strong>If you'd like to change your order, go back to <a href='http://www.mysite.com/cart/'>My Cart</a></strong><br />"; ?>
This does the trick, but everytime I update woocommerce I will have to added it again.
Any suggestion of a more practical and intelligent way of doing it?
Create a child theme.
Put this in the child theme's functions.php
/**
* Add link back to cart after order review on Checkout
*/
add_action( 'woocommerce_review_order_before_payment', 'my_back_to_cart_link' );
function my_back_to_cart_link(){
//get the cart link
global $woocommerce;
$cartUrl = $woocommerce->cart->get_cart_url();
//the HTML markup to add
$backToCartLink="<p class='backtocart'><a class='button alt' href='".$cartUrl."'>".__('Edit Cart','wooint')."</a></p>";
echo $backToCartLink;
}
Well, if you created a child theme you could have put that line in your child's functions.php and then the only way an update would affect it is if they changed the coding.