I am trying to display the add to cart button and variables dropdown / price inside a custom theme, built on Genesis.
I have created some code so that if the product is a simple product, it displays a custom form with the add to cart/quantity buttons inside the header (in functions.php > is_product()).
This works fine. What I'm now trying to do is display a similar form if it's a variable product, but obviously display the variable product dropdowns and add to cart/price, etc as they would default show in Woocommerce, but displaying it in the header, outside the loop.
I have this code:
$product_id = get_the_id();
$product = wc_get_product( $product_id );
<?php
if( $product->is_type( 'simple' ) ):
$html = '<form action="' . esc_url( $product->add_to_cart_url() ) . '" class="cart" method="post" enctype="multipart/form-data">';
$html .= woocommerce_quantity_input( array(), $product, false );
$html .= '<button type="submit" class="button alt">' . esc_html( $product->add_to_cart_text() ) . '</button>';
$html .= '</form>';
echo $html;
elseif ($product->is_type('variable')) :
woocommerce_variable_add_to_cart();
endif; ?>
I think woocommerce_variable_add_to_cart() should display the add to cart template for variables out of the box, but I'm getting an error:
Fatal error: Uncaught Error: Call to a member function get_children() on string in /wp-content/plugins/woocommerce/includes/wc-template-functions.php on line 1733
Do I need to pass $product into it somehow?
Related
I'm trying to add a specific product attribute ( in this case, the "warranty" ) to the elementor custom product page.
I have tried using "PHP Code Snippets" plugin and adding:
<?php
add_action( 'woocommerce_single_product_summary', 'product_attribute_after_price', 15 );
function product_attribute_after_price () {
global $product;
// HERE add your product attribute SLUG or taxonomy
$attribute_slug = 'guarantee';
$taxonomy = strpos($url, 'blog') !== false ? $attribute_slug : 'pa_' . $attribute_slug;
$attribute_name = get_taxonomy( $taxonomy )->labels->singular_name;
$term_name = $product->get_attribute( $taxonomy ); // The value
if( empty($term_name) ) return; // Exit if empty value
// If not empty we display it
$output = '<div class="product-attribute '.$taxonomy.'"><p>';
$output .= '<strong> '.$attribute_name.'</strong>: ';
$output .= '<span> '.$term_name.'</span>';
echo $output . '</p></div>';
}
but that shows nothing.
what should i do?
I have a custom product list on a specific category page.
It looks like this:
Product list category page with missing quantity selection and add to cart button at end.
I have been using the below in functions.php and it has worked fine. Since the last update of WooCommerce it no longer works. The add to cart buttons and quantity fields are not showing anymore.
I get no errors and the fields where the qty and button html goes are blank when I check the html for the page.
add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2 );
function quantity_inputs_for_woocommerce_loop_add_to_cart_link( $html, $product ) {
$term_id = get_queried_object()->term_id;
$post_id = 'product_cat_'.$term_id;
$wk_cat_value = get_term_meta($term_id, 'wh_meta_cat_template', true);
// Only for this product category
if ($wk_cat_value == 1 && is_product_category())
{
if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() )
{
$html = '<form action="' . esc_url( $product->add_to_cart_url() ) . '" class="cart" method="post" enctype="multipart/form-data">';
$html .= woocommerce_quantity_input( array(), $product, false );
$html .= '<button type="submit" class="button alt">' . esc_html( $product->add_to_cart_text() ) . '</button>';
$html .= '</form>';
}
return $html;
}
}
This line is a checkbox I added to the category page to specify if the current category is to use the custom template:
$wk_cat_value = get_term_meta($term_id, 'wh_meta_cat_template', true);
Template version Woocommerce files were 2.0.0.
Updated versions are 3.4.0.
Any suggestions greatly appreciated.
Found a solution:
function wk_add_to_cart() {
$term_id = get_queried_object()->term_id;
$post_id = 'product_cat_'.$term_id;
// $wk_cat_value is a flag added to this specific category to decide whether or not the add to cart should be added
$wk_cat_value = get_term_meta($term_id, 'wh_meta_cat_template', true);
global $product;
if ($wk_cat_value == 1 && is_product_category()) {
if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
echo '<form action="' . esc_url( $product->add_to_cart_url() ) . '" class="cart" method="post" enctype="multipart/form-data">';
echo woocommerce_quantity_input( array(), $product, false );
echo '<button type="submit" class="button alt">' . esc_html( $product->add_to_cart_text() ) . '</button>';
echo '</form>';
}
}
}
add_action('woocommerce_after_shop_loop_item','wk_add_to_cart');
Hope that helps.
I am using Woocommerce Product Add-on plugin to allow visitor to select multiple options on simple product. As the product is simple product Woocommerce display an Add to cart button on products page view instead of Choose option button linking on Product detail page where visitor can choose options.
I am looking to create a function that will display Choose option button on product by ID.
Here is my starting code.
add_filter( 'woocommerce_loop_add_to_cart_link', 'change_product_button' );
function change_product_button() {
global $product;
$id = $product->id;
if ($id == 91){
echo '' . __('View Product', 'woocommerce') . '';
} else {
// display usual add to cart button
}
}
Or maybe we can force product by id as non purchasable to simulate a variable product.
This is a working solution
add_filter( 'woocommerce_loop_add_to_cart_link', 'change_product_button', 10, 2 );
function change_product_button($html, $product) {
$values = array(190, 91);
$id = $product->id;
if(in_array($id, $values)){
$html= '' . __('Choose an option', 'woocommerce') . '';
} else {
$html = '<form action="' . esc_url( $product->add_to_cart_url() ) . '" class="cart" method="post" enctype="multipart/form-data">';
$html .= woocommerce_quantity_input( array(), $product, false );
$html .= '<button type="submit" class="button alt">' . esc_html( $product->add_to_cart_text() ) . '</button>';
$html .= '</form>';
}
return $html;
}
How can I add the counter beside the cart button on my products page (not the details product page), and it would appear like in the picture bellow
Can someone tell me which plugin should I use or any other suggestion?
Thank you in advanced!
To display quantity input fields for simple products within your shop archive pages, you can add the following code to your active theme’s functions.php file.
/**
* Code should be placed in your theme functions.php file.
*/
add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2 );
function quantity_inputs_for_woocommerce_loop_add_to_cart_link( $html, $product ) {
if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
$html = '<form action="' . esc_url( $product->add_to_cart_url() ) . '" class="cart" method="post" enctype="multipart/form-data">';
$html .= woocommerce_quantity_input( array(), $product, false );
$html .= '<button type="submit" class="button alt">' . esc_html( $product->add_to_cart_text() ) . '</button>';
$html .= '</form>';
}
return $html;
}
I've used this for a project I was working on not too long ago. This does what you need and is quite easy to follow: https://gist.github.com/JeroenSormani/a3325bdbca57f59690c1#file-woocommerce-archive-page-quantity-field-php
So you simply add this to functions.php and refresh... You may need to do:
.archive .quantity {
display: inline-block;
}
so it displays correctly.
Im trying to get the following information on a woocommerce single product page in order to replace the default price style of woocommerce.
When Item is on sale, I want to be able to get the original price and discounted price and echo it inside a dive for further styling. Im trying to achive something like this.
<div id="orig-price">Original Price: <?php echo $price; ?></div>
<div id="sale-price">Sale Price: <?php echo $sale-price; ?></div>
<div id="saved">You saved: <?php $saved=$price-$saleprice; echo $saved; ?></div>
I tried opening price.php but did not find what I am looking for. here is what I get.
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<p class="price"><?php echo $product->get_price_html(); ?></p>
<meta itemprop="price" content="<?php echo $product->get_price(); ?>" />
<meta itemprop="priceCurrency" content="<?php echo get_woocommerce_currency(); ?>" />
<link itemprop="availability" href="http://schema.org/<?php echo $product->is_in_stock() ? 'InStock' : 'OutOfStock'; ?>" />
<div><?php echo $sale_price_in_percent; ?></div>
</div>
Am I on the right place? Anyone know how can I access these attributes?
Thanks
Main function for displaying prices is get_price_html() in /woocommerce/includes/abstracts/abstract-wc-product.php file, and there are some filters to allow users to customize the html for prices:
woocommerce_sale_price_html
woocommerce_price_html
woocommerce_empty_price_html
woocommerce_free_sale_price_html
woocommerce_free_price_html
woocommerce_get_price_html
This function performs a complete job for showing prices including taxes and on sale calculations, and since you are completely rewriting the html the example below uses last filter there woocommerce_get_price_html. It extracts the prices from the original HTML and insert them into a new HTML structure.
add_filter( 'woocommerce_get_price_html', function( $price, $product )
{
global $woocommerce_loop;
// check if we are in single product page, in main section, and if product has price and is on sale
if ( is_product() && !isset( $woocommerce_loop ) && $product->get_price() && $product->is_on_sale() ) {
// collect prices from $price html string
$prices = array_map( function( $item ) {
return array( $item, (float) preg_replace( "/[^0-9.]/", "", html_entity_decode( $item, ENT_QUOTES, 'UTF-8' ) ) );
}, explode( ' ', strip_tags( $price ) ) );
$price = isset( $prices[0][0] ) ? '<span class="orig-price">Original Price: ' . $prices[0][0] . '</span>' : '';
$price .= isset( $prices[1][0] ) ? '<span class="sale-price">Sale Price: ' . $prices[1][0] . '</span>' : '';
if ( $product->get_regular_price() ) {
// set saved amount with currency symbol placed as defined in options
$price .= '<span class="saved">You saved: ' . sprintf( get_woocommerce_price_format(), get_woocommerce_currency_symbol(), $prices[0][1] - $prices[1][1] ) . '</span>';
}
}
return $price;
}, 10, 2 );
I'm using span tags here instead of divs used in question because the output is still wrapped in a paragraph. For further customization override the price.php template by placing him inside /themes/yourtheme/woocommerce/single-product/ folder.
This can be achieved by overriding woocommerce template. Create a new PHP file, write your div structure in that file.
Now refer this article on How to override template in WooCommerce
Hope this will move you in right direction