Woocommerce Element Properties

Email Elements

The email elements in the email customizer plugin are useful to design attractive email templates that’s better than your competitors. Email Customizer Pro provides 16 various email elements that are explained below:

  • Customer Details: It includes customer details like Emails, Billing address, Shipping address, and contact details.
  • Order Details: It has details like product order with quantity, price, and order number.
  • Divider: Used to divide the template design and it’s based on your usage.
  • Header: Add a header with the logo of your company.
  • Textarea: Enter any required texts in multiple lines inside the textarea.
  • Button: Add a button with the URL to redirect to the desired page. You can add many buttons inside templates depending on your requirements.
  • Disclaimer: Add your disclaimer text for the readers.
  • Maintext: The Maintext element comes with CKEditor, background image/color adding options, and double column option. Add text inside the content field. You can format your text, change the alignment of the font, include bulleted & numbered lists and more with CKEditor. It also lets you add merge fields such as {customer_name}, {order_no}, {order_date}, {blog_name}, {user_name}, {user_email}, and more.
  • Image: Add images inside your email templates using this email element. You can upload external images or images in your media library.
  • Title: Provide title text in your mail template.
  • Social Links: Get connected to your customers by sharing your social profiles links. Give the links to your social media profiles like Facebook, Twitter, Google+, Linkedin, Skype, Youtube, and Instagram.
  • Footer: Add some texts with redirect links at the end of your email template.
  • Signature: Add email signatures inside your template. Insert the signature element inside your template by dragging and dropping it. Select the edit icon. Click the ‘Sign Here’ button. Sign and submit your signature.
  • Multiple Image: Use this element to add multiple images inside your template.
  • Image Text: This lets you add an image with some text which displays in equal ratios.
  • Video: Insert this element if you want to include video inside your email template.

Use these elements when designing the email template. Just drag and drop the fields inside the email template designing area. All email elements have the edit, duplicate, and delete option.

Properties of Email Elements

Here we have listed all the properties of every email element.

Customer Details

1. Font Family Choose one font family from the list of styles.
2. Customer Details Background Color Change the background color by choosing a color in the color picker. Select the reset icon to revert to the previous color.
3. Customer Details Font Color Change the font color by selecting a color in the color picker. Click the reset icon to revert to the previous font color.
4. Width Size Adjust the width size of the element to fit your template design. Select the reset icon to revert to the previous width size.

Order Details

1. Font Style Choose one font style from the dropdown.
2. Table Background Color Choose the color from the color picker to set as the table background.
3. Font Color Choose any font color from the color picker.
4. Header Color Select a color for the table header.
5. Background Color Select a color to apply in the element’s background.
6. Width Size Adjust the width size of the element based on your needs.

Divider

1. Divider Width Adjust the width of the divider.
2. Divider Height Adjust the height of the divider.
3. Divider Color Choose a color for the divider.
4. Divider Background Color Choose a color for the divider background.
5. Width Size Adjust the width size of the divider element.

Header

1. Header Image Position Choose the header image position from the dropdown. By default, it’s placed in the center.
2. Choose Image From Upload an image inside the header. Either give an external URL of an image or upload an image from the media library. Choose the url and enter the image url. Or choose wp-media, click ‘Upload Image’ and upload an image from the WordPress media library.
3. Background Color Set the background color for the header.
4. Logo Width Adjust the width of the logo image. It also shows the value of the width after you change the width.
5. Logo Height Adjust the height of the logo image. You can view the value of the height below after adjusting.
6. Width Size You can change the width size of the header.

Text Area

1. Enter Text Enter any text inside the ‘enter text’ field.
2. Text Position Change the position of the text to left, center, or right.
3. Font Color Set the font color for the text.
4. Font Style Choose any font style from the dropdown for the text.
5. Font Size Select any font size for the text from the dropdown.
6. Text Area Background Color Set the background color for the text area.
7. Width Size Adjust the width size of the text area element.

Button

1. Button Link Provide the button link here.
2. Text Enter the text for the button.
3. Button Color Set the button color.
4. Font Color Set the button font color.
5. Button Position Change the button position to center or left or right.
6. Button Background color Set the background color for the button element.
7. Width Size Adjust the button element width size.
8. Button Height Adjust the button height.
9. Button Radius Adjust the radius of the button.
10. Button Width Adjust the button width.

Disclaimer

1. Text Provide some text here.
2. Disclaimer Position Modify the disclaimer position to left, center, or right.
3. Font Color Set the font color for the disclaimer text.
4. Font Style Choose any one font style from the dropdown.
5. Font Size Choose a font size for the disclaimer text.
6. Disclaimer Background Color Choose a bg color for the disclaimer.
7. Width Size Set the width size for the disclaimer element.

Main Text

1. Title Background Choose a background color. Or add an image as a background. 
Either enter the image url or upload any image from the WordPress media library.
2. Width Size Set the width size for the main text.
3. Top Set the top border radius.
4. Bottom Set the bottom border radius.
5. Number of Columns It has double column support. Select column1 for single column and select column2 for double columns.
6. Content Add media and text inside the column content. Format your text and media using the CKeditor.

Image

1. Image Position Change the image position to left, center, or right.
2. Choose Image From You can either insert an external image or upload an image from WordPress media. Choose ‘Url’ and provide the image url. Select ‘WP-media’ and click ‘Upload image’ then upload the desired image from your WordPress media.
3. Image Background Color Select a background color for the image.
4. Image Width Adjust the width of the image.
5. Image Height Adjust the height of the image.
6. Top Set the top border radius.
7. Bottom Set the bottom border radius.
8. Border Choose the desired border to give around the image. You can set color and pixel value for the image border.
9. Rounded Corner Use to round the corner of the image border outside edges.
10. Width Size Adjust the width size of the element.

Title

1. Text Position Change the text position to left, center, or right.
2. Sample Text Enter the title text here.
3. Text Color Choose any color for the title.
4. Font Size Select apt font size for the text.
5. Background Color Add a background color to the title text element.
6. Width Size Adjust the width size of the element.

Social Links

1. Icons Position Choose the icon position to place it in the left, center, or right.
2. Link Background Color Add an apt background color.
3. Facebook link Provide the link to your Facebook profile.
4. Twitter link Provide the link to your Twitter profile.
5. Google+ link Provide the link of your Google+ profile.
6. Linkedin Link Provide the link to your Linkedin profile.
7. Skype Link Add the Skype link.
8. Youtube Link Add Youtube channel link
9. Instagram Link Enter your Instagram profile link
10. Width Size Adjust the width size of the social links element.

Footer

1. Text Add a text to display in the footer.
2. Text link Give a link for the text to redirect to the desired location.
3. Text Add some texts to display in the footer.
4. Text link Give a link for the text to redirect to the desired page.
5. Text Add some texts here.
6. Text link Give a link for the text to redirect to the desired location.
7. Text Color Select a color for the text in the footer.
8. Background Color Choose a background color for the footer.
9. Width Size Adjust the width size of the footer element.

Signature

1. Signature position Select a position for your signature to place inside the template.
2. Background Color Add a background color for the signature element.
3. Logo Width Set width for the signature.
4. Logo Height Set height for the signature.
5. Width size Set the width size of the signature element.
6. Sign here button Use the button to draw and submit your signature.

Multiple Image

1. Image background color Choose a background color for the multiple image element.
2. Choose Image From Choose ‘Url’ and provide the link. Enable the checkbox beside it to upload the image inside the template. Or select ‘WP-Media’ and click ‘Upload Image’ then choose an image from the media library.
3. Image Link Give a link for the image to redirect to the desired location.
4. Image Caption Enter a caption for the image.
5. Choose Image From Upload any external image or media image.
6. Image Link Give a link for the image.
7. Image caption Add an image caption.
8. Chooser image from Include any image Url or choose a media image.
9. Image link Give a link for the image to redirect the user.
10. Image caption Give an image caption.
11. Border Set borders for each image.
12. Rounded corner Use it to round the images’ borders outside edges.
13. Width size Set the width size for multiple images.

Image Text

1. Background color Set a background color for image text.
2. Image URL Add image URL or upload image inside your WordPress media. If you want to replace the URL with a new image. Copy and paste the image Url then click the ‘Update’ button.
3. Image Width Set width for the image.
4. Image Height Set height for the image.
5. Enter Text Enter any text here to be displayed on the left side of the image.
6. Font Style Choose the apt font style.
7. Font Size Select font size from the dropdown.
8. Font Color Select a color for the font.
9. Width Size Set a width size of the Image text.

Video

1. Video URL Enter the URL of the video here.
2. Video Background color Choose a background color.
3. Width size Adjust the width of the video element.
4. Enter caption Enter a caption for the video
5. Font color(caption) Set font color for the video caption text.
6. Font style(caption) Choose a font style for the caption.
7. Font size Choose the font size of the caption.