Woocommerce product list add item to cart icon - Support | Kriesi.at

Tagged: Cart, product list, woocommerce

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
April 10, 2016 at 10:33 pm #610858

jambrikp
Participant

Hello!

I would like to do an avia product list with an ‘add item to cart’ icon. I use avia product list element for woocommerce.
I know I can choose between two options: link to single page or add item to cart, but I would like title link to single page and a cart icon for add item to cart.

How can I do this? Please check my mockup
Please help me, its very important for me.

Best regards,
Peter

April 12, 2016 at 7:39 am #611710
Ismael
Moderator
Hey Peter!

Thank you for using Enfold.

This is possible but you have to modify the config-templatebuilder > avia-shortcodes > productslider.php file. Look for this block of code:
```
$text .= $image;
					$text .= "<div class='av-catalogue-item-inner'>";
					$text .= "<div class='av-catalogue-title-container'><div class='av-catalogue-title av-cart-update-title'>{$title}</div><div class='av-catalogue-price av-cart-update-price'>{$price}</div></div>";
					$text .= "<div class='av-catalogue-content'>{$content}</div>";
					$text .= "</div>";
					
```
You can add the add to cart markup inside that container.

Cheers!
Ismael
April 12, 2016 at 11:14 am #611798

jambrikp
Participant

Thank you, I will try :)
Can I copy productslider.php to child folder? Or when I goning to update Enfold I should add this code again?

Best regards
Peter

April 12, 2016 at 2:15 pm #611882

Yigit
Keymaster

Hi!

Please refer to this post – http://kriesi.at/documentation/enfold/add-new-or-replace-advanced-layout-builder-elements-from-child-theme/

Best regards,
Yigit

April 13, 2016 at 1:09 am #612261
jambrikp
Participant
Thank you! I have child shordcode folder.. its cool :)

I changed this line:
```
$text .= "<div class='av-catalogue-title-container'><div class='av-catalogue-title av-cart-update-title'>{$title}</div><div class='av-catalogue-price av-cart-update-price'>{$price}</div><div class='cws-add-to-cart'>{$add_to_cart}</div></div>";
```
But I would like the cart icon and the price in one line.
How can I do this?
```
.cws-add-to-cart:before {
    content: "\e859";
    font-family: 'entypo-fontello';
    font-size: 24px;
    margin-left: 95%;
}
```
And what can I use instead of $product_category and $add_to_cart or $cart_buttons? I tried to use these but do not work…. :(
I wolud like to use one icon for add-to-cart and another one icon to link to single-product-page for details.

Best regards
Peter
April 15, 2016 at 7:30 am #614594
Ismael
Moderator
Hi!

Add this in the Quick CSS field to align the elements:
```
.av-catalogue-title {
    padding-right: 120px;
}

.av-catalogue-price {
    right: 50px;
}

.cws-add-to-cart {
    position: absolute;
    right: 0;
    top: 0;
}
```
Adjust the values as needed. You may have to add css media queries to adjust their position on smaller screens.

Regards,
Ismael
April 15, 2016 at 7:42 am #614599

Ismael
Moderator

Hi!

UPDATE: I checked the product list markup and I just realized that the whole item is wrapped inside the link tag so you can’t add another link to it. You have to choose between the add to cart url or the link to the actual product page.

Regards,
Ismael

April 15, 2016 at 11:30 am #614729
jambrikp
Participant
Thank you! :)
And If I do a new markup in the php? Its hard or not?
Something like this? $cws-add-to-cart-url = $product->add_to_cart_url();
```
global $product;
					
					$link 	= 	$product->add_to_cart_url();
					$ajax_class = 'add_to_cart_button product_type_simple';
					$text	= "";
					$title 	= 	get_the_title();
                                        $cws-add-to-cart-url = $product->add_to_cart_url();
					$content = 	get_the_excerpt();
					$price = 	$product->get_price_html();
					$rel   = "";
					
					if(empty($link_behavior))
					{
						$cart_url = get_the_permalink();
						$ajax_class = "";
					}
					else
					{
						$cart_url = $product->add_to_cart_url();
						$ajax_class = $product->is_purchasable() ? "add_to_cart_button" : "";
						$rel = $product->is_purchasable() ? "rel='nofollow'" : "";
					}
					
					$image = get_the_post_thumbnail($product->id, 'square', array('class'=>"av-catalogue-image av-cart-update-image av-catalogue-image-{$show_images}"));
					
					$text .= $image;
					$text .= "<div class='av-catalogue-item-inner'>";
					$text .= "<div class='av-catalogue-title-container'><div class='av-catalogue-title av-cart-update-title'>{$title}</div><div class='av-catalogue-price av-cart-update-price'>{$price}</div></div>";
					$text .= "<div class='av-catalogue-content'>{$content}</div>";
					$text .= "<div class='cws-add-to-cart'>{$cws-add-to-cart-url}</div>";
					$text .= "</div>";
```
Regards,
Peter
April 16, 2016 at 11:14 pm #615596
Shorty05
Participant
Hi Ismael,

can you may let me know how to remove the link tag of the items in the product list element ?

i wanna display everything like it is i just wanna get rid of the link. ( no add to cart option no view single product page )

RESOLVED GOT IT MANAGED – edited the sprintf
- This reply was modified 8 years, 7 months ago by Shorty05.
April 17, 2016 at 8:03 am #615734

Ismael
Moderator

Hi!

@jambrikp: Please review our last post: https://kriesi.at/support/topic/woocommerce-product-list-add-item-to-cart-icon/#post-614599

@shorty05: Glad that you figured it out. :)

Regards,
Ismael
Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.