Docs

[koruailimited]

Hi,

Can you help me with these small changes? Thanks (using X theme and woocommerce)

1- Photo “Product single page 1” – How can i move the Purchase button close to the price and align centered?
2- Photo “Product single page 2” – Reviews take all width of the page, it’s huge. How can i make smaller and align centered?
3- Photo “my account 1” – Icons of the menu inside of my account are so small, how can i make them bigger? And How can i change the position of the text “from your account ……” and separate in different lines
4 – Photo “my account 2” – textbox are too big, how can i do it smaller?

[koruailimited]

5 – Photo “my account 3” – how can i put titles on each line? looks like very poor
6 – Photo “my account 4 and 5” – how can i reduce the size of the font and put titles in the address
7 – Make smaller the buttton of view orders?
8 – Photo “my account 7” – textbox are too big, how can i do it smaller? and make 2 columns on the left “login” on the right “register”
9 – is there any plugin to make a nice “my account”?
10 – is there any plugin to have a cart like in shopify?

Thanks!!!!!

[koruailimited]

sorry, this is the photo of “Product single page”

[Darshana]

Hi there,

Thanks for writing in! To assist you with this requests, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[koruailimited]

This reply has been marked as private.

[Lely]

Hello There,

Thank you for the URL.
1.) Add this code on Appearance > Customize > Custom > Edit Global JS:

jQuery( function($) {    
   $('.single-product form.cart').insertAfter('.single-product p.price');
});

To center it price and purchase button, add the following CSS on Appearance > Customize > Custom > Edit Global CSS:

.woocommerce .cart,
.woocommerce .price {

    text-align: center;
}

2.) Updare above JS script to this:

jQuery( function($) {    
     $('.single-product form.cart').insertAfter('.single-product p.price');
     $('<div style="clear:both;"></div>').insertBefore('.woocommerce-tabs');
});

Then add this custom CSS too:

.woocommerce div.product .woocommerce-tabs {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    float: none;
}

Adjusr 800px to your preferred width.

3.) and others: Unfortunately, for my account issues, we need your login credentials so we can check. Please share it on a private reply.

9.) I found this:https://wordpress.org/plugins/custom-my-account-for-woocommerce/. Just note that questions regarding functions and integration of third party plugin should be directed to original developer.

10.) Do you mean a plugin that will give you same cart page design with shopify? I am not sure if that exist, This might need customization on the design. You might want to consult a developer to achieve this.

Hope this helps.

[koruailimited]

This reply has been marked as private.

[Rad]

Hi there,

1. 2. What product has quantity option? Please add this CSS as well

  .single-product div[itemprop="offers"] {
  text-align: center;
  }
  .single-product div[itemprop="offers"] > * {
  display: inline-block;
  }

3. I don’t see icons, just buttons (even from your screenshot). Should they be larger? If yes, please add this CSS as well.

.woocommerce-MyAccount-navigation-link a {
    font-size: 18px;
}

4. Should the form smaller? Or just make the input fields in inline alignment? Please add this as well,

.woocommerce-account form .form-row, .woocommerce-checkout form .form-row {
    margin-bottom: 0.65em;
    width: 48%;
}

5. What do you mean by titles on each line? Information are already distributed on each line. A clarification or visual guide will be helpful 🙂

6. What titles? I think it’s related to #5, right? Maybe adding caption and arrows to the screenshots will clear this up. And what text should be changed in relation to font size? I checked and there are many data displayed on order page.

7. Please add this as well,

.woocommerce-account .button {
    padding: 2em 1em;
}

8. Add this CSS as well,

@media ( min-width: 768px ) {

  .woocommerce .u-columns .col-1,
  .woocommerce .u-columns .col-2{
  width: 48%;
  float:left;
  margin-right: 4%;
  }
  
  .woocommerce .u-columns .col-2{
  margin-right: 0;
  }

/*do not forget this close bracket*/  
}

Thanks!

[koruailimited]

This reply has been marked as private.

[koruailimited]

This reply has been marked as private.

[koruailimited]

This reply has been marked as private.

[Christopher]

Hi there,

Please add following code :

span.woocommerce-Price-amount.amount, input.input-text.qty.text {
    margin-left: 15px;
}
.cart_totals {
    border: 2px solid red;
    padding: 10px;
}
@media (main-width:767px){
.woocommerce .cart .actions .coupon input[type="text"] {
    width: 29%;
    margin: 0;
    float: left;
}
.woocommerce .cart .actions>input {
    float: left;
}
.woocommerce-account form .form-row, .woocommerce-checkout form .form-row {
    margin-bottom: 0.65em;
    width: 100%;
}
.woocommerce-account form .form-row-first, .woocommerce-account form .form-row-last, .woocommerce-checkout form .form-row-first, .woocommerce-checkout form .form-row-last {
    float: none;
}
.col-2 {
    float: right;
    width: 48%;
border: 1px solid red;
    padding: 20px;
}
.col-1 {
    width: 48%;
    float: left;
border: 1px solid red;
    padding: 20px;
}
h3#order_review_heading {
    width: 100%;
    float: left;
}

div#order_review {
    border: 1px solid red;
    overflow: hidden;
    width: 100%;
    padding: 20px;
}
.woocommerce-account form .form-row, .woocommerce-checkout form .form-row {
    margin-bottom: 0.65em;
    width: 100%;
}
.woocommerce-account form select, .woocommerce-account form textarea, .woocommerce-account form input[type="tel"], .woocommerce-account form input[type="text"], .woocommerce-account form input[type="email"], .woocommerce-account form input[type="password"], .woocommerce-checkout form select, .woocommerce-checkout form textarea, .woocommerce-checkout form input[type="tel"], .woocommerce-checkout form input[type="text"], .woocommerce-checkout form input[type="email"], .woocommerce-checkout form input[type="password"] {
    width: 50%;
}
.woocommerce-MyAccount-content header h2 {
    margin-top: 0 !important;

}
}

.woocommerce-account .button {
    padding: 1em 6em;
}
nav.woocommerce-MyAccount-navigation ul {
    display: table;
    margin-right: auto;
    margin-left: auto;
}
.u-column1.col-1, .u-column2.col-2 {
    border: 1px solid red;
    text-align: center;
    padding: 20px;
}
.u-column1.col-1.woocommerce-Address, .u-column2.col-2.woocommerce-Address {
    border: 1px solid red;
    text-align: center;
    padding: 20px;
}
.woocommerce-account form .form-row-first, .woocommerce-account form .form-row-last, .woocommerce-checkout form .form-row-first, .woocommerce-checkout form .form-row-last {
    float: none;
}
.woocommerce-account form .form-row, .woocommerce-checkout form .form-row {
    width: 100%;
}
.woocommerce-MyAccount-content {
    width: 50%;
    margin: 0 auto;
    border: 1px solid red;
    padding: 20px;
}

You can add CSS in customizer or style.css file, it doesn’t matter both are correct.

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities.

Hope it helps.

[koruailimited]

Yes, Thanks a lot for your help.

I understand that you can’t help me with all and i’ll have to find a developer.

But there are 2 issues that i think you can help me:

– Something is wrong with the users. I’ve already created some of them and i can’t enter again with login and password. It’s very strange!!!

– My account -> account details -> Why don’t show first and last name when the user already exits and it’s login???

[koruailimited]

Already resolved…

[Rad]

Glad to hear that, cheers!

[Author]

Posts