Applet Orchard

WOOCOMMERCE ADDON (by Themify) TUTORIAL!

[ad_1]
This is a quick tutorial video on How to Use the WooCommerce Addon by Themify.
*GET ADDONS HERE* USE: HOGAN for 30% OFF!
PLEASE LIKE/SUBSCRIBE FOR MORE VIDEOS 😉

This is a awesome plugin that allows you to add any products you want to sell on any page/blog post on your website in minutes!

For this addon to function you must download the “WooCommerce Plugin”.

*CSS CODE for Editting Button*

.woocommerce #content input.button, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-page #content input.button, .woocommerce-page #respond input#submit, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button, .woocommerce #content input.button.alt, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce-page #content input.button.alt, .woocommerce-page #respond input#submit.alt, .woocommerce-page a.button.alt, .woocommerce-page button.button.alt, .woocommerce-page input.button.alt, .woocommerce ul.products li.product a.button, .woocommerce.archive ul.products li.product a.button, .woocommerce-page.archive ul.products li.product a.button, .woocommerce-product-search input[type=”submit”] {
background: #fff;
color:#000;
}
.woocommerce #content input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce-page #content input.button:hover, .woocommerce-page #respond input#submit:hover, .woocommerce-page a.button:hover, .woocommerce-page button.button:hover, .woocommerce-page input.button:hover, .woocommerce #content input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover, .woocommerce ul.products li.product a.button:hover, .woocommerce.archive ul.products li.product a.button:hover, .woocommerce-page.archive ul.products li.product a.button:hover {
background: #000;
color: #fff;
}

*SUBSCRIBE for more videos (coming soon…)*

If you have any questions, leave them down below!

Cheers, Hogan.

••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••

▼Connect with Me ▼

W E B S I T E:
F A C E B O O K:
T W I T T E R:

••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••

▼My Mission▼

On this channel, my mission is not just to teach you how to make a website/blog but to really inspire you to chase your dreams. A lot of the times, we let the fear of the unknown hold us back from starting anything. My job is to show you that it is possible and hopefully be a piece of a bigger puzzle that helps you achieve your goals and dreams. Believe in yourself and never, ever give up! Hogan 🙂

••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••

Posted

in

by

appletorchard

Tags:

Comments

28 responses to “WOOCOMMERCE ADDON (by Themify) TUTORIAL!”

  1. TheReflexShow Avatar
    TheReflexShow

    I cant change the list layout for reason

    Reply
  2. CoreCommandoTV Avatar
    CoreCommandoTV

    PLEASE HELP! When I drag and drop the woocommerce button from Themify builder, nothing happens. It doesn't pop up the customization menu or anything. This is only happening with the woocommerce button. Any help?

    Reply
  3. y amy Avatar
    y amy

    hi, hogan,this is amy. that's great video. for woocommerce, there is sidebar on the single product page. I have tried all ways to remove it: i have already removed all things from sidebar widget, and do set post layout without sidebar, no effect. i also tried add "body.single-product .site-content .col-9-12 { width: 100%; }" in the custom CSS, but still no effect. could you tell us how to do remove the sidebar in themify ultra?

    Reply
  4. Like Kane Avatar
    Like Kane

    the woocommerce excelling ecommerce plugin is not showing up in the search. is it okay to use something else?

    Reply
  5. sarah sarah Avatar
    sarah sarah

    could you please explain me how to be a member in themify.me

    Reply
  6. Christiane Kussner Avatar
    Christiane Kussner

    Here is a new code for all, cause this one doesn't work with the new update-shows in button in red:

    Go to the Woocommerce Product Page Or Cart Page, You will See Buttons in Red colors. To change the color of the buttons , Replace the “backgroud: red !important” to your desired color. Click Update and It will Be Done and Ready to Go.

    .woocommerce-message { display: none; }
    .woocommerce-cart.full-width-content .content,
    .woocommerce-checkout.full-width-content .content { max-width: 100%; }

    .woocommerce-cart .woocommerce table.shop_table td.actions {
    border-top: 1px solid #e6e6e6;
    background: #f7f7f7;
    border-bottom: 0px solid #e6e6e6;
    }
    .woocommerce-cart .entry-content form { width: 60%; float: left; }
    .woocommerce-cart .woocommerce .cart-collaterals {
    width: 33%;
    float: right;
    }
    .woocommerce-cart .woocommerce .cart-collaterals h2 { display: none; }
    .woocommerce-cart .woocommerce .cart-collaterals .cart_totals { width: 100%; }

    #add_payment_method .cart-collaterals .cart_totals tr th,
    .woocommerce-cart .cart-collaterals .cart_totals tr th,
    .woocommerce-checkout .cart-collaterals .cart_totals tr th,
    #add_payment_method table.cart th,
    .woocommerce-cart table.cart th,
    .woocommerce-checkout table.cart th,
    .woocommerce-checkout table.shop_table th { color: #034997; font-size: 14px; font-size: 1.4rem; }

    #add_payment_method .cart-collaterals .cart_totals tr td,
    .woocommerce-cart .cart-collaterals .cart_totals tr td,
    .woocommerce-checkout .cart-collaterals .cart_totals tr td,
    #add_payment_method table.cart td,
    .woocommerce-cart table.cart td,
    .woocommerce-checkout table.cart td,
    .woocommerce-checkout table.shop_table td { color: #555; font-size: 16px; font-size: 1.6rem; }

    .woocommerce-cart .woocommerce table.shop_table th { border-bottom: 2px solid #034997; }

    .woocommerce-cart .woocommerce table.shop_table,
    .woocommerce-checkout .woocommerce table.shop_table {
    border: 1px solid #e6e6e6;
    margin: 0;
    text-align: left;
    width: 100%;
    border-collapse: separate;
    border-radius: 0;
    border-bottom: none;
    border-right: none;
    margin-bottom: 35px;
    border-bottom: 1px solid #e6e6e6;
    }

    body #add_payment_method #payment ul.payment_methods li input,
    body.woocommerce-cart #payment ul.payment_methods li input,
    body.woocommerce-checkout #payment ul.payment_methods li input { width: auto; margin: -2px .5em 0 0; }

    body .woocommerce form .form-row .input-checkbox { width: auto; margin: -2px 5px 0 0; }

    #add_payment_method .cart-collaterals .cart_totals tr td,
    #add_payment_method .cart-collaterals .cart_totals tr th,
    body.woocommerce-cart .cart-collaterals .cart_totals tr td,
    body.woocommerce-cart .cart-collaterals .cart_totals tr th,
    body.woocommerce-checkout .cart-collaterals .cart_totals tr td,
    body.woocommerce-checkout .cart-collaterals .cart_totals tr th,
    body .woocommerce table.shop_table th {
    border-top: none;
    border-bottom: 1px solid #e6e6e6;
    border-right: 1px solid #e6e6e6;
    text-align: right;
    padding: 10px 20px;
    }

    .woocommerce-message a.button.wc-forward {
    background: #1e8afe !important;
    }
    a.checkout-button.wc-forward, .coupon input.button{
    background: red !important

    .woocommerce #content input.button.alt, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce-page #content input.button.alt, .woocommerce-page #respond input#submit.alt, .woocommerce-page a.button.alt, .woocommerce-page button.button.alt, .woocommerce-page input.button.alt

    }

    Reply
  7. Adil Mirzakhanova Avatar
    Adil Mirzakhanova

    Hey Hogan

    Thank you so much for the great tutorial!
    For some reason, the Woocommerce module doesn't show on mobile. Do you have any idea why this might be?

    Cheers,
    Adil!

    Reply
  8. Ralphi Ralph Avatar
    Ralphi Ralph

    Hi Hogan, I downloaded the plugin and then added the demo layout. I decided I don't like it but don't know how to get rid of the code. I deleted the page but when I added another shop page it was still there. How do I get rid of the demo data?

    Reply
  9. Максим Варава Avatar
    Максим Варава

    Hey Hogan! How can you add hover effect on woocommerce addon images?

    Reply
  10. Comparethebot Avatar
    Comparethebot

    can you add one product at a time?

    Reply
  11. Daniel Quintana Avatar
    Daniel Quintana

    hi Hogan!! how are you?

    I have a problem and I was hoping you could help me with some advice.
    Install the woocommerce plugin successfully but, at the moment of activating the constructor, it is stunned and does not go any further.
    If I uninstalled woocommerce the builder runs again.
    Do you have any idea what the problem might be?

    thank you so much for your time.

    Reply
  12. Romeo Mcanroe Mofokeng Avatar
    Romeo Mcanroe Mofokeng

    Hi Hogan, I see you are using XAMPP to design locally, but mine does not show option for turning on Themify Builder, how do I solve the problem? It becomes a challenge having to be online all the time a do a website. Thanks for an amazing work

    Reply
  13. Sickestnurse Avatar
    Sickestnurse

    please do one on how to make a full store in themify!

    Reply
  14. Dave Hoque Avatar
    Dave Hoque

    Hi Hogan. Say I've had woocommerce on my Ultra page for several months now and have had no problems. Recently when I try and add a new product through the woocommerce plug in the products show "published" but they will not display with the others on my home page. I've checked everything and it seems like no product was added any differently. Now all 8 of my products are showing on my "Shop" page…but not on my home page. What may be wrong here? Thanks for any advice.

    Reply
  15. Anna Escalada Avatar
    Anna Escalada

    This code doesn't work for the latest version of ultra theme

    Reply
  16. Alexandra Stratan Avatar
    Alexandra Stratan

    really awesome, is there a full woocommerce tutorial by chance? ty

    Reply
  17. Tenus One Avatar
    Tenus One

    do I need to buy that add-on in order to work properly or i can use demo?

    Reply
  18. David Guldager Avatar
    David Guldager

    hi I need to make a product page like this one. ( https://www.coptikk.no/Kontaktlinser/Endagslinser/BioTrue-OneDay ) Is it possibel with this addon? Thx

    Reply
  19. Federico Gompertz Avatar
    Federico Gompertz

    Hogan can you have only a add to cart button? I worked a lot in my layout design and don't want to have this grid looking stores. Thanks You!

    Reply
  20. Sougan Mandi Avatar
    Sougan Mandi

    hi Hogan,I have installed woocommerce on my wordpress account but when i turn on the Themify Builder woocommerce option are not come in..what should i do?

    Reply
  21. stevey192 Avatar
    stevey192

    Hogan can you please do a tutorial on how to edit the product page?

    Reply
  22. Pixelhubbed Avatar
    Pixelhubbed

    Hi Hogan, thanks so much for this tutorial you really saved my bacon. Can I ask though… how do I change the description colour of the product (which is the page title too) from the default red to a colour of my choice? Many thanks in advance :

    Reply
  23. just Cherelle Avatar
    just Cherelle

    hogan, I follow all of your videos and I am thankful that you make them. right now Im working on the blog tutorial but I dont know how to add a store with woo commerce. can you do a full tutorial on that please. I am a beginner

    Reply
  24. ales pajek Avatar
    ales pajek

    Hogan i really apreciate what your doing, love your inspire tutorial as well. My question is : is it possible to edit single product page with that addon, or at least delete it and make it with builder? Also having problems with redirecting back from product, to default woo shop page???

    Reply
  25. Crystal B. Avatar
    Crystal B.

    Hey Hogan,
    I'm using your ultra theme and I am aware of the list section in woocommerce, thing is, my website limits only up to 6 items, even though the layout allows more items to be shown. Is there any way this can be fixed? Thanks!

    Reply
  26. Dave Hoque Avatar
    Dave Hoque

    Hi Hogan. Another excellent video, thanks. I'm using in conjunction with constructing my site based on your "Inspire" tutorial too. My question is this: I need to add a commerce HTML widget provided by fineartamerica.com It basically redirects the customer to their page in which they can buy prints and other products based upon my original art…which I'm selling on my personal page I'm constructing. Their instructions tell me I can cut and past their embed code on any page and it will work. However, this may be tricky with a Themify webpage. Can you tell me if I can add the widget and if so how? Thanks much mate!

    Reply
  27. stevey192 Avatar
    stevey192

    How do I edit the product page? I seem to have comments and reviews and a bunch of random sidebar widgets

    Reply
  28. MissJoaquim.com Mutiara Pearls Avatar
    MissJoaquim.com Mutiara Pearls

    thanks hogan

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *