WooCommerce Grid / List toggle v1.1.0 not working on enfold :( - Support

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

Author

Posts
February 12, 2017 at 8:02 pm #746013

gtekit
Participant

Hello,

This is my first post, I have recently purchased the enfold theme and am 99.9% happy with everything about the theme.

The 0.1% that is driving me insane is that no matter what I do I simply cannot get any of the woocommerce list / grid view plugins to work correctly with this template. I am so happy with the rest of the theme and would find it a great shame if I had to purchase yet another template from somewhere that works with the grid / list view plugins for woocommerce. I have read everything I can find on the subject on here and tried everything suggested like adding custom css described here although I understand that this solution was for a much older version of the plugin and Enfold theme, Also hereand here I realise that you do not support any 3rd party plugins and nor do I aspect you to, however I am amazed that there seems to be no particular solution to what would seem to be a relatively small issue in the grand scheme of things ?

My problem is that the description on the list view appears beneath the product image and not to the right of the product image as you would expect as described and shown here.

I have tried other plugins and even purchased ones such as the one by berocket, which works in the respect that the decription and product image a next to each other but has limited styling options, the add to cart buttons and all the description text are styled bu the plugin itself and not the enfold theme, so all in all, it just doesn’t look quite right.

Please could someone help me find a solution to this problem as it is essential that I have the list view on my site due to the type of content and the mobile devices people are likely to be using with my site. I really don’t want to change from the enfold theme if I can help it.

Kind Regards

Pete

February 15, 2017 at 1:45 am #747240

gtekit
Participant

Hi Guys,

Not sure I have posted this in the correct place, just wondered if anyone had any input on my issue ?

Can someone please advise me if I need to post this somewhere else ???

Thanks in advance,

Pete

February 20, 2017 at 7:46 am #749170
Ismael
Moderator
Hey!

Thank you for using Enfold. And we are very sorry for the late response.

How do you want the plugin output or the grid to look like? How many columns are you expecting? We can help with the styling modification but you should contact the plugin author for additional help. Please try these css codes:
```
ul.products.list li.product h3, ul.products.list li.product div[itemprop="description"], ul.products.list li.product .price, ul.products.list li.product .gridlist-buttonwrap {
    width: 100%;
    float: right;
    clear: none;
    padding: 10px 20px;
}

#top .thumbnail_container img {
    margin: 0 auto !important;
    float: none !important;
}
```
Cheers!
Ismael
February 20, 2017 at 11:23 am #749266
gtekit
Participant
Hi Ismael !!!

Thanks for the reply, I am still having major problems trying to get the list view to work correctly within the Enfold theme. My problem is that the product image and the short description of the product actually stack ontop of each other, rather than displaying side by side as you would expect.

I tried adding the css as you suggested but unfortunately I still have the same issue, the css cantered the product image but it still sits on top of the short description instead of sitting beside it. When I switch themes to the “twenty seventeen” the list view displays correctly and as you would expect, so it must be something to do with how enfold handles the product image view ?

I have included screen shots to show how it is displayed both with and without the css modification you suggested and also of what I want the list view to look like, demonstrated within the twenty seventeen theme.

list view with no modifications
https://drive.google.com/open?id=0Bzw2xC-yOliKcWVfZ01pbkVreEk

list view with suggested css modification
https://drive.google.com/open?id=0Bzw2xC-yOliKSm52Z1Z0Y0RrQUk

list view displaying correctly in twenty seventeen theme
https://drive.google.com/open?id=0Bzw2xC-yOliKM3Yzd3VkMTQtNkE

Thanks for you help on this one Ismael it is very much appreciated !!! I really hope you can get to the bottom of this for me !!

Regards

Pete
- This reply was modified 7 years, 9 months ago by gtekit.
February 21, 2017 at 5:23 am #749711
Ismael
Moderator
Hi!

Thank you for the info. Please add the following css code at the very bottom of the Quick CSS field:
```
#top div .products.list .product .woocommerce-LoopProduct-link {
    width: 33%;
    float: left;
}

#top div .products.list .product .thumbnail_container img {
    width: 100%;
}

#top .products.list .product h3 {
    width: 100%;
    float: none;
    margin: 10px 0;
}

#top div .products.list .inner_product_header {
    border-top: none;
}

#top div .products.list .inner_product_header .avia-arrow { 
   display: none; 
}
```
It will look like the screenshot afterwards:

View post on imgur.com

Regards,
Ismael
February 21, 2017 at 8:04 pm #750137
gtekit
Participant
Hi Ismael, thank you once again for your help !!!

I have added the code and this is a big improvement to what I had before however my images look much small than in the screenshot you provided, any ideas ?

Would it be possible to move the product description and price from underneath the image so that the product description and product price are on the right hand side, leaving just the product image on the left ?

ie
Product image @ 33% (Left Hand Side)
Product Name, Product Description, Price @ 67% (Right Hand Side)

Thanks for your help Ismael !!

Regards

Pete
- This reply was modified 7 years, 9 months ago by gtekit.
February 22, 2017 at 7:33 am #750289
Ismael
Moderator
Hey!

The image is small because the following css modification overrides it.
```
ul.products.list li.product img {
    width: 30.75% !important;
    float: left;
    margin-bottom: 1.5em;
    -webkit-transition: none !important;
    margin-right: 3.8% !important;
}
```
If you want to move the title beside the image, add this code in the functions.php file:
```
function ava_custom_script_mod(){
?>
<script>
(function($){
	function a() {
		$('#top div .products.list .product').each(function() {
			var head = $(this).find('.woocommerce-LoopProduct-link'),
				title = head.find('.inner_product_header'),
				desc = $(this).find('div[itemprop="description"]');
	
				title.prependTo(desc);
		});
	}
	
	a();
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'ava_custom_script_mod');
```
I’m sure you can handle the rest.

Best regards,
Ismael
February 22, 2017 at 5:59 pm #750568

gtekit
Participant

Hey Ismael,

Thank you so much for all your help with this !! I can alter the css to resize my images now I know where to look, thanks for that !!

I have added the custom function code to my child themes functions.php file but it doesn’t seem to have any effect on the title at all, it still remains in the same place. I also tried adding it directly to the main enfold themes functions.php to make sure, this had no effect either.

I have reverted the code in the main enfold functions.php file back to how it was and left the code you suggested above in my child themes functions.php. Would it be possible to for you to take one final look at my site via FTP ? I have submitted you some login details to use.

I really do appreciate your help Ismael, the support I have received so far has been fantastic.
Regards
Pete

February 24, 2017 at 4:34 am #751207

Ismael
Moderator

Hi!

Thank you for the info. We modified the code in the functions.php file a bit. Please remove browser cache or hard refresh before checking the page. The product title will move once the page finished loading.

Best regards,
Ismael

October 18, 2018 at 2:11 pm #1023357

EdgeWP
Participant

I realize this is an older post, but after recent updates, I’m now facing the exact same issue with the grid list plugin.. When in List View I would like to move the Product Title Up Above the Description..

https://www.htech.net/product-category/indicator/ninjatrader-8/

I’ve tried the php code posted above in #750289, but even tweaking a bit, I could not get it to work either..

Could you please post the final modified php code that was used to correctly move the Title?

Thanks

October 19, 2018 at 11:15 am #1023842

Ismael
Moderator

Hi,

Can you give us a screenshot of the issue? Please open a new thread when possible.

Best regards,
Ismael

October 19, 2018 at 1:15 pm #1023913

EdgeWP
Participant

Good Day Ismael

I didn’t start a new thread, because I believe what I’m asking for is the exact issue you already solved here in this one.. but for some reason the final tweaked solution was not posted above..

I left this link to live site page in my original message above..

https://www.htech.net/product-category/indicator/ninjatrader-8/
(just toggle between grid and list to see issue)

but here is a link to screenshot as well..

Thanks

October 21, 2018 at 7:14 pm #1024566

Victoria
Inactive Moderator

Hi EdgeWP,

Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

Best regards,
Victoria

October 21, 2018 at 9:50 pm #1024602

gtekit
Participant

Hi EdgeWP, Ismael and Victoria :) ….

I am afraid to say that despite intuative solutions that Ismael came up with to find a solution to this, I could never actually get a the look that I wanted with the grid/list view on the Enfold theme which was an absolute “must” for my website.

In the end I opted to find a different theme with the grid/list feature “built in” hence not needing to use the plugin at all !

I did request the built in grid/list feature to be considered in future versions of the enfold theme, alas.. it seems that the theme still does not support it, regardless of the fact myself and many other owners of the theme saw it as an absolute must … I honestly thought it would only be a matter of time (which unfortunately I didn’t have … and sorry to say, I’m glad I didn’t wait ! )

A real shame in my opinion, this could easily be integrated into enfold from the developers point of view, I’m sure of it ! .. if this had been the case I would have stuck with the theme for the long haul as it’s support staff and general coding/build of the theme are second to none !

I hope this post doesn’t get removed or swept under the carpet, as I have the upmost respect for the Kriesi team and all their efforts, I just hope they take my opinion into account and build on it … listening to customers requirements and implementing changes will keep this theme going for a long time!!

Good luck EdgeWP, I hope this will help nudge the kriesi support to get you sorted :)

Kind Regrads

Pete

October 22, 2018 at 5:17 am #1024665
Ismael
Moderator
Hi,

@gtekit: Sad to hear that you’ve switched theme. Good luck. And thank you for the input.

@EdgeWP: Use this script in the functions.php file:
```
add_action('wp_footer', 'ava_move_prod_list_title', 9999);
function ava_move_prod_list_title() {
    ?>
    <script>
        (function() {
                const p = document.querySelectorAll('.list .product');
                if(p) {
                    p.forEach( pr => {
                        const t = pr.querySelector('.inner_product_header'); 
                        const d = pr.querySelector('.woocommerce-LoopProduct-link');
                        const f = t.cloneNode(true);
                            
                        t.querySelector('.woocommerce-loop-product__title').remove();
                        d.parentNode.insertBefore(f, d.nextSibling);

                        f.querySelector('.price').remove();
                        f.querySelector('.onsale').remove();

                    });
                }
        })();
    </script>
    <?php
}
```
And then add this css code:
```
#top div .products.list .woocommerce-loop-product__link + .inner_product_header {
    float: left;
    clear: none;
    height: auto;
    min-height: 0;
}
```
Best regards,
Ismael
Author

Posts

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

You must be logged in to reply to this topic.