Trying to achieve something that should be simple, but I've tried 3 approaches with multiple code variations and I just can't make it work. I'm trying to create a button that will appear in place of the "ADD TO CART" button on single product pages when the item is out of stock. Clicking the button will fire a popup contact form.
Is creating an add action in functions the right way to go, or should I replace the normal button with an if statement? I've tried both, so help with coding either would be greatly appreciated.
You can either hook into woocommerce_loop_add_to_cart_args using a filter in your functions.php or edit the template file directly by pulling it into your theme. Either way will require a bit of PHP.
If doing it in your functions.php, it would look something like this (untested but should send you down the right path):
<?php
add_filter( 'woocommerce_loop_add_to_cart_link', 'my_out_of_stock_button' );
function my_out_of_stock_button( $args ){
global $product;
if( $product && !$product->is_in_stock() ){
return 'Contact us';
}
return $args;
}
I don't know what your button code should actually look like or what other information you need to capture, but this is how you could override the "Add to Cart" button and replace it if out of stock.
UPDATE
LoicTheAztec brought up a great point - the filter provided only affects the button on the archive, category, tag overview pages - not the individual product pages. There are no hooks for the individual product page buttons BUT you can copy the templates to your theme and override them.
You'll want to look at the files in templates/single-product/add-to-cart. Use a similar if statement as above:
#simple.php
<?php if ( $product->is_in_stock() ) : ?>
// Standard WooCommerce code
<?php else: ?>
// Your button code
<?php endif; ?>
Just add below code in functions.php file of your enabled theme reference
add_action('woocommerce_after_shop_loop_item', 'themelocation_change_outofstock_to_contact_us', 1);
// for shop page
function themelocation_change_outofstock_to_contact_us() {
global $product;
if (!$product->is_in_stock()) {
remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart');
//change the link to your contact us page
echo ' Contact Us ';
}
}
// for single page
add_filter('woocommerce_get_availability', 'wcs_custom_get_availability', 1, 2);
function wcs_custom_get_availability($availability, $_product) {
// Change In Stock Text
if ($_product->is_in_stock()) {
$availability['availability'] = __('Available!', 'woocommerce');
}
// Change Out of Stock Text
if (!$_product->is_in_stock()) {
$availability['availability'] = __(' Contact Us ', 'woocommerce');
}
return $availability;
}
I was looking for a way to show a contact button on bespoke products and
#ahwychkchih solution works great. One issue I had though is that schema markup will show as out of stock for those products which is not the case for beskpoke products is just they can't be purchased straight away so I've added this to force in_stock markup for my products. I'm aware that this solution would affect all products so you can always add a product id filter if needed
// Force In Stock schema markup
function fix_my_product_offers_schema ($markup_offer, $product) {
if (!$product->is_in_stock()) {
$markup_offer['availability'] = 'https://schema.org/InStock';
}
return $markup_offer;
}
add_filter('woocommerce_structured_data_product_offer', 'fix_my_product_offers_schema', 1, 2);
Related
I am trying to customize the link behavior when you click a product image in woocommerce category page. Lets assume all products are simple. By default clicking product image will redirect to single product page.
Below each product image there's a "Quick View" button providing a pop up of single product page.
This button event triggers the popup.
Is there a way to clone button click behavior to product's image?
In case you have any idea I would be deeply grateful. Thank you for your time in advance!
Here is my code:
add_action ('woocommerce_before_shop_loop_item', 'custom_loop_product_link_open', 1);
function custom_loop_product_link_open(){
if ( is_page( 424 ) ) {
// Remove default image link
remove_action ('woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10);
// Add custom image link function
add_action ('woocommerce_before_shop_loop_item', 'change_loop_product_link_open', 10);
}
}
function change_loop_product_link_open(){
global $product;
?>
<script type="text/javascript">
(function($) {
$('.woocommerce-LoopProduct-link').click(function() {
$('.yith-wcqv-button').click();
$('.yith-wcqv-button').triggerHandler('click');
});
})(jQuery);
</script>
<?php
}
Problem:
I need to add a shortcode [wc_sc_available_coupons] below the product table on the checkout page.
I added the following code in functions.php
The problem is the shortcode displays at the very bottom of the checkout form.
I changed the number 10 to 120 but still the same.
Would you please let me know how to add the shortcode below the product table (=above the payment)?
Code I tried:
add_action( 'woocommerce_after_checkout_form', 'wnd_checkout_code', 10 );
function wnd_checkout_code( ) {
echo do_shortcode('[wc_sc_available_coupons]');
}
Thank you.
Would woocommerce_checkout_after_customer_details hook work for you? So your code would be something like this:
add_action( 'woocommerce_checkout_after_customer_details', 'wnd_checkout_code' );
function wnd_checkout_code( )
{
echo do_shortcode('[wc_sc_available_coupons]');
}
If not then you could try other hooks such as woocommerce_checkout_before_order_review or you could try this woocommerce_before_order_notes as well.
This one is right before the payment:
add_action( 'woocommerce_review_order_before_payment', 'wnd_checkout_code' );
function wnd_checkout_code( )
{
echo do_shortcode('[wc_sc_available_coupons]');
}
Use the action:
add_action("woocommerce_after_cart_table", $action)
OR
add_action("woocommerce_before_cart_collaterals", $action)
Result
https://imgur.com/a/zQVNedb
In general for WooCommerce you can find hook info here:
https://woocommerce.github.io/code-reference/hooks/hooks.html
and for your template:
https://woocommerce.github.io/code-reference/files/woocommerce-templates-cart-cart.html#source-view.159
You can see information on the actions allowed by looking at the source code in woocommerce/templates/ and checking the do_action() functions.
I'm attempting to override the URL of the 'Buy Product' button for all External/Affiliate WooCommerce products. The button needs to link to a contact page and pre-fill the 'Subject' form field with the product title included via query string (e.g. Product enquiry: Product Title).
After reading https://stackoverflow.com/a/43947253/4068853 I've been able to get pretty close by adding the following to functions.php:
// Override external button url
function override_external_product_url( $url, $product ){
if ( 'external' === $product->get_type() ) {
// custom add to cart url example
$url = home_url( "/contact/?your-subject=Product enquiry:");
}
return $url;
}
add_filter( 'woocommerce_product_add_to_cart_url', 'override_external_product_url', 10, 2 );
The only thing remaining is to add the product title to the end of the query string. I know the product title can be fetched with <?php the_title_attribute(); ?> but being a PHP noob I'm just not sure how to implement this into the function?
Thanks.
Ended up using get_the_title instead because the_title_attribute was causing an error (product title text duplicating and rendering outside the button markup). Also added url encoding, final code looks like:
// Override external button url
function override_external_product_url( $url, $product ){
if ( 'external' === $product->get_type() ) {
// custom add to cart url example
$url = home_url("/contact/?your-subject=" . urlencode("Product Enquiry: " . get_the_title()));
}
return $url;
}
add_filter( 'woocommerce_product_add_to_cart_url', 'override_external_product_url', 10, 2 );
I'm using WooCommerce on a WordPress site that I'm building and I need to be able to display a specific product's price throughout the site. Normally that wouldn't be an issue, but in this instance it's a product which has 2 variations, so I need to show both of them (e.g. £4.99 - £9.99). How can I retrieve these values and echo them out?
Put the following in your theme's functions.php file:
function so_28073705( $product_id ) {
$wc_product_variable = new WC_Product_Variable( $product_id );
$variation_price_html = $wc_product_variable->get_price_html( );
return $variation_price_html;
}
When you want to use it:
<?php echo so_28073705( <product_id> ); ?>
returns:
<span class="amount">$low-price</span>–<span class="amount">$high-price</span>
The code bellow, is to show a custom field I created to customize Woocommerce product category pages.. This code makes the custom field appear "after" the list of products. I need to make this code appear BEFORE the list of products... any hint on what I have to change in this bit of php code to make the custom field show before?
<?php
// Display details on product category archive pages
add_action( 'woocommerce_after_shop_loop', 'wpm_product_cat_archive_add_meta' );
function wpm_product_cat_archive_add_meta() {
$t_id = get_queried_object()->term_id;
$term_meta = get_option( "taxonomy_$t_id" );
$term_meta_content = $term_meta['custom_term_meta'];
if ( $term_meta_content != '' ) {
echo '<div class="woo-sc-box normal rounded full">';
echo apply_filters( 'the_content', $term_meta_content );
echo '</div>';
}
}
Thank you, I would really like to understand what makes the code appear after and not before, is the filter? in the last lines?
I found this bit of code at http://www.wpmusketeer.com/add-a-wysiwyg-field-to-woocommerce-product-category-page/
use below action to display custom fields before list of products
add_action('woocommerce_before_shop_loop','wpm_product_cat_archive_add_meta');