in use WoodMart ThemesWhen building an e-commerce website, the login/registration pop-up window is one of the earliest interfaces that users will come across. If it's not stylized or doesn't match your brand's style, it may affect the user's first impression of your site.WoodMart already provides very flexible login and registration popups, and you can use them via thecustomizableThe stylized approach makes this module more in line with the brand's vision and enhances the overall sense of professionalism and recognition.

Step 1: Enable and preview login/registration popups

Before you begin, make sure that your WoodMart theme settings have enabledpop-up windowLogin function:

• Go to the WordPress backend and click WoodMart > Theme SettingsThe
• show (a ticket) My account Setup page.
• tick Login/Register tabs(Enable pop-up login feature).

• After saving, visit your website homepage, click on the "User Icon" in the upper right corner, and make sure the pop-up window pops up properly.

The popup style you see at this point is the base look that WoodMart provides by default.

Step 2: Make basic style adjustments with the Theme Settings panel

The power of WoodMart is that many styles can be adjusted through the theme panel without writing code:

• go into WoodMart > Theme Settings > Styling > Buttons, you can uniformly modify the color, font size, rounded corners, etc. of the buttons in the pop-up window.

• leave for Styling > FormsYou can modify the input box style of the form, such as border color, input text color, background color and so on.

• exist Header Builder In this case, you can also modify the icon style or label font of the top popup login portal if it is used.

It is recommended to keep the pop-up window style consistent with the color scheme of the whole station, highlighting the main tone of the brand color, while paying attention to the contrast between the button text and the background to avoid users from seeing it.

Step 3: Further embellish the details with custom CSS

If the inbuilt setup doesn't meet the demand, add a bit ofCustomized CSSto accomplish finer style adjustments. Here are a few examples of common customizations:

Modify the background color and rounded corners of the popup window

.wd-popup.popup-login {
  background-color: #ffffff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
}

Modify the input box border and focus state

.woocommerce-form .form-row input.input-text {
  border: 1px solid #ccc;
  input.input-text { border: 1px solid #ccc; border-radius: 6px;
  
  font-size: 14px; }
}

.woocommerce-form .form-row input.input-text:focus {
  box-shadow: 0 0 0 1px #162ae8; }
  box-shadow: 0 0 0 1px #162ae8;
}

Change button colors and fonts

.button.wd-login-submit {
  background-color: #162ae8;
  
  
  border-radius: 6px; }
}

.button.wd-login-submit:hover {
  background-color: #0d1cb0; }
}

Paste the above CSS code into the WordPress Backend > Appearance > Customization > Extra CSS in, save it and refresh the front page to see the effect.

Step 4: Multi-language or multi-step form support (optional)

If your site is geared towards multilingual users, you can take advantage of the WPML maybe Polylang Plugins that enable multi-language switching of popup content; WoodMart is compatible with these plugins and only requires translation of the corresponding login/registration form text.

Also, if you wish to make the registration process a multi-step form, such as filling out an email address in the first step and setting a password in the second step, you can combine the Custom Login Popup Shortcode Or use a third-party popup plugin integrated in the WoodMart pop-upsin the trigger structure.

Tip: Avoid over-customization and keep it simple and usable!

Custom styles can enhance brand visuals, but don't overdo the design and compromise theform (document)of usability. Here are a few suggestions:

• Input boxes should have clear boundaries and enough space to avoid being too compact.
• All buttons are recommended to have clear text, contrasting colors, and obvious click feedback.
• Prioritize if pop-up content is highMobile Responsiveeffect to avoid spillage.

summarize

Customizing the WoodMart login/registration popup style is not complicated, whether you want to optimize the color fonts in a small way or do a deeper visual style unification, you can do it with in-built settings and a small amount of CSS to make adjustments. With clear thinking and a few tweaks, the first impression of your website will be even better.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨詢：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off