WordPress.org

Ready to get started?Download WordPress

Forums

eShop
[resolved] [closed] Shortcodes - Panels with Product Description (18 posts)

  1. mccrodp
    Member
    Posted 3 years ago #

    Hi,

    Firstly, I find the plugin great, a mile better then the wp-ecommerce plugin that my WordPress 3 book advised me to use.

    I am in need of a bit of advise however. I have products page(s) that I want to display 9 products on in a 3 x 3 grid. I have tried using the following tags:

    [eshop_list_subpages form="yes" records="9"]
    [eshop_list_subpages form="yes" records="9" panels="yes"]

    The first shortcode displays all the necessary information I want, however it will be hard to style this the way I want in the grid format. I know I can use CSS3's nth child selector for this but browser support isn't great and I'm interested in an alternative. E.g. - Is there any hook functions for this I can use to modify the markup output? I don't want to lose my changes next eShop update by modifying your code.

    The second shortcode is perfect aside from the product description/excerpt being absent. Is there a way to get the description to show using this shortcode?

    Any help and advise on the above is greatly appreciated. Thanks.

    Best Regards,
    @mccrodp

  2. elfin
    Moderator
    Plugin Author

    Posted 3 years ago #

    Pretty sure it could be done via CSS using the first shortcode, try setting class='eshoppanels' and see what that does.

  3. mccrodp
    Member
    Posted 3 years ago #

    Genius!

    Yes, adding that class definitely did the trick alongside some simple CSS.

    Big thank you for the quick and accurate response.

    ~mccrodp

  4. theemonkey
    Member
    Posted 3 years ago #

    mccrodp. I am a newbie and would happily mooch off your code. I know some CSS but not enough to make a gallery so please post here, how you did this. I'm hungry for code!!!

  5. mccrodp
    Member
    Posted 3 years ago #

    Hello, yes no problem, I'll try and point you in the right direction.

    Firstly if you are not already, ensure you are using the firebug browser plugin or similar, so that you can "Inspect" the CSS of your Products page. Also insure you have the class present in the shortcode as elfin described: [eshop_list_subpages class="eshoppanels"]

    You should then see the product list with similar markup to the following:
    <ul class="eshop eshoppanels">
    <li class="eshop-product-86"><li class="eshop-product-87">....

    All you should need to do then is force the width of the outer container of the products to be narrow enough. The width you chose will determine how many products will fit on each row inside your ul.eshoppanels container.

    For example I set the below CSS on a twentyten child theme using a one column template, this gave me 3 products per row as required


    ul.eshoppanels li {
    width:15em;
    }

    Hope that helps, good luck.

    ~mccrodp

  6. theemonkey
    Member
    Posted 3 years ago #

    Hello, yes no problem, I'll try and point you in the right direction.
    Firstly if you are not already, ensure you are using the firebug browser plugin or similar, so that you can "Inspect" the CSS of your Products page. Also insure you have the class present in the shortcode as elfin described: [eshop_list_subpages class="eshoppanels"]
    You should then see the product list with similar markup to the following:
    <ul class="eshop eshoppanels">
    <li class="eshop-product-86"><li class="eshop-product-87">....
    All you should need to do then is force the width of the outer container of the products to be narrow enough. The width you chose will determine how many products will fit on each row inside your ul.eshoppanels container.
    For example I set the below CSS on a twentyten child theme using a one column template, this gave me 3 products per row as required

    ul.eshoppanels li {
    width:15em;
    }

    Hope that helps, good luck.
    ~mccrodp

    Yes of course, I have firebug. I can not imagine how I lived without out it before. Firebug is just amazing. And I was using it when trying to inspect my CSS and play around with it but I didn't have the class. Thanks for the help. It's very helpful to have panels and excerpts. -Thanks again. And other then that others will see the solutions as well. I hate to come to forums and find out someone's like "Oh thanks I figured it out." and not post it.

    -Off trying to edit my CSS

  7. theemonkey
    Member
    Posted 3 years ago #

    Awesome. Worked for me. Now I make the changes in eShop.css correct?

  8. mccrodp
    Member
    Posted 3 years ago #

    Good good. Well the CSS will work there alright. The reason I wouldn't advise putting it in eShop.css is that when you update eShop plugin next you will most likely overwrite the changes you've made.

    I would put it in your theme's css file: /wp-content/themes/[YOUR_THEME]/style.css

    You won't lose your changes when you put them there. However, If you change your theme down the line you will need to re-add those CSS styles to the new theme's stylesheet.

    ~mccrodp

  9. theemonkey
    Member
    Posted 3 years ago #

    Good good. Well the CSS will work there alright. The reason I wouldn't advise putting it in eShop.css is that when you update eShop plugin next you will most likely overwrite the changes you've made.
    I would put it in your theme's css file: /wp-content/themes/[YOUR_THEME]/style.css
    You won't lose your changes when you put them there. However, If you change your theme down the line you will need to re-add those CSS styles to the new theme's stylesheet.
    ~mccrodp

    Yeah I tried and it wouldn't work anywhere. Seems like it inherits alot and builds on with other files(Online). The Firebug CSS file is nothing like the local file.

    I'll try putting in the theme CSS and see how it goes. Thanks.

  10. theemonkey
    Member
    Posted 3 years ago #

    I'm having some trouble finding where to put it...

  11. theemonkey
    Member
    Posted 3 years ago #

    I tried a quick search for "li class" in my theme. None there. Should I just make one?

  12. mccrodp
    Member
    Posted 3 years ago #

    I am confused, you cannot find your theme's css stylesheet? It should be at:

    /wp-content/themes/[YOUR_THEME]/style.css

    Best access your site through FTP or go to yoursite.com/wp-admin/theme-editor.php and add to the end of the stylesheet there.

    I'm not sure what you mean by "li class".

  13. theemonkey
    Member
    Posted 3 years ago #

    I'm sorry I meant I could not find where to put the CSS code in my style.css. Sorry for being so stupid but I was trying to add a rule for the entire (li) class. Because in Firebug it didn't show up as

    ul.eshoppanels li

    it showed up as

    #content .eshop <strong>li</strong>, #content ul.eshopfeatured <strong>li</strong>, #content ul.eshopfeatured li, #content ul.eshopsubpages <strong>li</strong>, ul.eshopcats li, #content ul.eshoprandomlist li, #content ul.eshopshowproduct li, #content ul.eshoppanels li, #content fieldset.eshoppayvia li, #content .pagfoot ul li, #content ul.continue-proceed li {

    So with my limited knowledge I just figured li (class)is what I should to change.

    Anyways I just looked back at your code and saw the ul.eshoppanels li { and just made that rule instead in my theme. It works great.

    Here's what I got. http://handmadebyerika.com/test-page-shop/anyoccasioncards/

    Wow.... I just realized the class I needed was in firebug after all.

    #content .eshop li, #content ul.eshopfeatured li, #content ul.eshopfeatured li, #content ul.eshopsubpages li, ul.eshopcats li, #content ul.eshoprandomlist li, #content ul.eshopshowproduct li, #contentul.eshoppanels li, #content fieldset.eshoppayvia li, #content .pagfoot ul li, #content ul.continue-proceed li {

  14. theemonkey
    Member
    Posted 3 years ago #

    Thanks a billion dude. I owe it to you that I found your article and learned how to do panels, and then panels and excerpts.

    P.S. The company who made my theme is called Billion. Haha. Thanks a billion.

  15. mccrodp
    Member
    Posted 3 years ago #

    No worries, glad I could help! :)

    ~mccrodp

  16. elfin
    Moderator
    Plugin Author

    Posted 3 years ago #

    eShop doesn't use the css within the plugin except on first install when it copies it to a directory: wp-content/eshop_files. Then I even include a handy editing functionality via Appearance > eShop

    This way it doesn't get overwritten with each update.

    Additionally if you have an eshop.css in the current theme, then that takes precedence.

  17. mccrodp
    Member
    Posted 3 years ago #

    Ahhh ok that's great, appreciate the clarification.
    The eshop.css in the current theme is definitely a feature I would use.

    Thanks,
    ~mccrodp

  18. theemonkey
    Member
    Posted 3 years ago #

    Wow that's awesome. I'm going to use the eShop.css in my theme as well.

    Great plugin Pedley.:D

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags