WooCommerce my account customization

[jianshin90]

Hi, I’m using the intergrity theme option. However, the wocommerce my account page interface is not that neat
https://www.coffeekingdoms.com/my-account/

Is there any tutorial or guidelines how I can customize the woocommerce my account page to something like this?
example: https://demo2.madrasthemes.com/electro/my-account/

[ruenel]

Hello There,

Thanks for writing in!

You may find any tips and help in this link: https://www.google.com/search?q=how+to+modify+woocommerce+my+account+login&pws=0&gl=us&gws_rd=cr

If you want to have a two column set up like this:

Please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media (min-width: 768px){
  .col2-set .col-1, .col2-set .col-2 {
    float: left;  
    width: 48%;
    margin-right: 4%;
 }

 .col2-set .col-2 {
    margin-right: 0;
 }
}

Hope this helps.

[jianshin90]

Thanks alot !
One more, how do I customize the woocommerce shop page at 2 column at mobile view?

[Prasant]

Hello @jianshin90,

Thanks for updating the thread.

Actually I am not quite sure the customisation you are looking to make on Shop page when viewed using mobile devices. If you are looking to change the layout then that can be done from X > Theme Options > WooCommerce > Shop > Shop Columns.

In case I misinterpreted your question, please elaborate the same and will be happy to assist you further.

Thanks.

[jianshin90]

Hi,
I would like this make the mobile shop page look like this https://www.pickfo.com/collection/wall-art/
Thanks for the advice !

[ruenel]

Hello There,

At the moment, you only have one product. Please add more so that we can check out how it would look like in smaller screens. To display a two column shop page in smaller devices, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(max-width: 979px){
    .post-type-archive.woocommerce .products li.product {
        float: left;
        width: 48%;
        margin-right: 4%;
    }

    .post-type-archive.woocommerce .products li.product:nth-child(2n) {
        margin-right: 0;
    }
}

Hope this helps.

[jianshin90]

It’s working! Thanks for the help!

[rad]

You’re most welcome!