One place for hosting & domains

      CSS3: A Quick Intro


      In Web Design and Development, like most fields, you have to evolve to keep up with the times. This is especially true with new features that get added to one of a designers most often used tools, like CSS. CSS3, the latest specification for CSS, has several new features designers can start taking advantage of right now.

      The biggest and most important change in CSS3 is definitely the modularization of the specification approval process. What this means is that each section of CSS3 (borders, box shadow, images, etc) has its own module. That means that they can be approved individually, and developed separately.

      This means we get changes faster, and when they come they are more relevant to what the community and browser developers have been asking for. It also means it’s easier for browser to be up to date on the new standard, because it’s received piecemeal, rather than all at once. This means less worrying about how your content looks across different browsers and platforms.

      We all know a few in our field who are more like dinosaurs than designers. Don’t be a dinosaur, stuck using outdated techniques and boring design practices. Elevate your designs and take advantage of the latest technologies with techniques like:

      Transitions

      Long have designers struggled to use Adobe Flash and JavaScript to accomplish image transitions. No more. Gone are the days of ugly, often tacky Flash transitions and difficult to implement JS animations. Now, with CSS3 transitions, designers can use a clean, lightweight browser-side solution to implement their transitions, instead of a heavy server-side method. There are two key ways to do this. First, and most simply, you can use the transition declaration and trigger mouse-based effects like hover or trigger the animation with a simple JS change. Alternatively you can use the @keyframe rule to specify specific changes to the animation that don’t require user input. You can read more about CSS3 transitions here.

      Gradients

      Tired of mucking about in Photoshop, struggling to get the gradient for those buttons just right? So is everyone else. Thankfully now, you don’t have to! CSS gradients allow designers to create beautiful gradients that look excellent on any display. Best of all, it’s all in a nice, light-weight CSS file that’s supported by all browsers, and doesn’t require you to use heavy, resource taxing images (are you noticing a theme here?). Gradients have actually been around for a while now but only now are they available for use in every browser. Right now, radial and linear repeating and non-repeating gradients are available and more are likely to be on the way.

      3D Transforms

      Let’s be honest for a second here. We designers can be a very…showy group of people. Some might say we enjoy lording our abilities over designers less in the know than we are. Now, if this sounds like you, or if you just want to build a beautiful, eye-catching portfolio, CSS3 3D transforms can really help your work stand out. Never ever underestimate the value of a little flash (pun shamelessly intended) in your web page design, especially when you want to stand out from a veritable sea of other designers.

      Border Radius

      Rounded corners look great. Rounded corners look natural. Rounded corners have historically been a pain in the ass to code, and using images can quickly increase file sizes. Now your buttons can have natural, rounded edges without excessive code! Use CSS3’s new border-radius property to create simple rounded edges that don’t require excess fiddling with height and width properties, and don’t break when you tweak content or location. If you want an example, try these code snippets (courtesy of webreference.com ) on a web page of your own.

      CSS:

      
      .box {
        border: 2px solid orange;
        border-radius : 25px;
        width: 100px;
        padding: 10px;
        text-align:center;
      }
      
      

      HTML:

        `<div class="box">Submit</div>`
      
      

      Border Image

      Continuing on the subject of borders, how often have you wanted to have a nice, pretty border around a div or image, only to realize that you have to spend time in Photoshop and even more time making the border responsive because all of your default choices are just plain unattractive? Now your borders are only limited by your imagination and Photoshop/Illustrator skill. You can now create easy to work with image sprites and apply them with the border-image property. That will let you quickly and easily create those pretty borders you want, all without spending hours fiddling and adjusting things.

      Web Fonts

      It seems like only yesterday designers were forced to consult tables and lists of “web-safe” fonts. Well, those days are behind us now, and all of us should be grateful. The @font-face rule now allows you to use services like Google Web Fonts and typekit to include any font you could possibly imagine just be incorporating a new stylesheet. This means your typography choices are no longer limited to ones you know your end-user is likely to have access to. This also means no more specifying 12 different font-family’s just to be sure your text isn’t an ugly default font.

      CSS Columns

      Want to layout your articles in a responsive, column based layout? Not long ago that meant you had several options. First, you could use a table and be loathed by everyone in the design world. Second, you could use JS to flow your content into containing divs and be loathed by yourself for the torturous amount of time such a process would take. Now, however, no tables or trade-offs are needed! You can simply use the columns rule and you’re done. The only issue you may run into is with getting things to look the same across all browsers (I’m looking at you IE) but with Internet Explorer going the way of the dodo, it looks like that issue should be sorted out as well.

      Selectors

      Finally, and perhaps most importantly, we have new CSS selectors. It would take more space than I want to use to go into detail about them all, so we’ll just hit the highlights and you can check out the complete list here. We can still use the old CSS2 selectors as well, but now we have some new rules. What it comes down to is we now have the ability to select DOM elements based on what their attribute values are, instead of specifying ID’s and Classes for each element. Now you can style them based simply on their attribute field.



      Source link

      How to Add a Quick View Option to Your WooCommerce Products


      WooCommerce is an excellent tool for creating and managing an online store. However, there are some features it doesn’t include out of the box, such as a quick view option. Considering the importance of product displays for landing sales, this is a crucial missed opportunity.

      The good news is that, like many such issues in WordPress, you can solve this problem without too much trouble. Using the right plugin, you can easily add a quick view option to all of your products. This makes it easier for customers to examine and purchase items – and increase your conversion rate to earn more revenue!

      In this post, we’ll explain the many benefits of adding a quick view display option to each of your WooCommerce products. Then we’ll share two simple steps for doing so using WooCommerce Quick View Pro. Let’s get right to it!

      Your Store Deserves WooCommerce Hosting

      Sell anything, anywhere, anytime on the world’s biggest eCommerce platform.

      The Benefits of Including a Quick View Option for Your WooCommerce Products

      In online retail, a quick view display is a popup box that shows a product’s key details. This information might include one or several images, pricing, variations, and an Add to Cart button.

      An example of a WooCommerce quick view popup.

      Quick view displays are typically accessed by clicking a button or hovering over a product in a catalog or list view. For example, you might include quick views on your product category pages, so customers can see more information about individual products without having to navigate to their product pages.

      Quick view buttons on a product list page.

      This feature provides several benefits to your users. For instance, since they don’t have to navigate back and forth between your product lists and individual product pages, browsing becomes a lot easier. Guests can simply open the quick view display to see a product’s details, and then continue looking through the other items on the page.

      Additionally, quick view displays are an ideal place to include photo galleries, zoom options, and information about product variations and add-ons. With these additions, customers can get an up-close look at the items they’re interested in from multiple angles. They can also see each of the colors or other variations an item comes in.

      Finally, quick view displays with an Add to Cart button simplify the purchasing process. Customers can add multiple items to their carts without having to leave your category page or product list. This enables them to continue browsing without interruption, increasing the chances that they’ll buy more products.

      Ultimately, adding a quick view option is beneficial to both you and your potential customers. Enhancing your product displays with this handy feature is a simple way to make your e-commerce website easier and more enjoyable to use.

      How to Add a Quick View Option to Your WooCommerce Products (In 2 Steps)

      With the WooCommerce Quick View Pro plugin, adding quick view popup boxes for each of your WooCommerce products is fast and easy. Let’s look at how to configure and use this solution in just two steps.

      Step 1: Download, Install, and Activate WooCommerce Quick View Pro

      The first thing you’ll need to do is acquire WooCommerce Quick View Pro, and add it to your WooCommerce site. It’s important to note that you must already have WooCommerce installed and activated for this quick view plugin to work.

      To get started, head to the developer’s website and navigate to Plugins > WooCommerce Quick View Pro.

      Navigating to the plugins page on the Barn2 website.

      Here you’ll find information and pricing for the plugin; at this time, there isn’t a free version of this particular tool. Once you’ve purchased a license, you can download the WooCommerce Quick View Pro .zip file. You should also receive an email containing your license key. Make sure to take note of this, as you’ll need it to finish setting up the plugin.

      Next, make your way to your WordPress admin dashboard and navigate to Plugins > Add New. Click on Upload Plugin at the top of the screen.

      Uploading a new plugin.

      You can then select or drag-and-drop the .zip file containing the plugin, and hit Install Now. After the installation is complete, select the Activate button as well.

      Finally, with your license key in hand, access WooCommerce Quick View Pro’s settings by navigating to WooCommerce > Settings > Products > Quick View. The first field available should be the one for your license key.

      The License Key field.

      Add your license key here, then scroll down and click on the Save changes button. You’re now ready to start using the plugin.

      Step 2: Configure the Plugin’s Settings to Meet Your Needs

      Once you’ve installed and activated WooCommerce Quick View Pro, the plugin will automatically add a quick view display option to each of your products. However, you can also customize these displays to include the information you need by visiting the plugin’s settings.

      First, you’ll want to decide how your customers will open the quick view displays. You can use a button, enable the quick view to open when a customer clicks on the product image or name , or both.

      The quick view open settings.

      Leaving both of these options unchecked will disable the quick view displays entirely.

      The two fields below the Opening the Quick View check boxes will help you customize your Quick View button with your own text. You can also choose to add or remove the button icon. Next, you’ll need to decide what information you want to include in your popups. You have the option of an image, product details, or both.

      The quick view contents options.

      If you include images, you can choose to enable a gallery-style view and zoom functionality. Quick View Pro works great as a standalone WooCommerce gallery lightbox plugin. Both of these options are useful for customers who want to see variations on a product or get a closer look at fine details such as stitching.

      Using the zoom feature in a quick view display.

      If you choose to add product details to your quick view displays, you’ll also need to check the box for each item you wish to include. Your options are:

      • Reviews: These can provide social proof for your merchandise.
      • Price: An important detail for customers who are debating a purchase.
      • Short description: It helps to highlight features that could make an item more desirable.
      • Add to Cart button: A button makes purchasing fast and easy.
      • Meta information: This includes extra product information such as categories, tags, and SKU codes.

      Once you’ve selected all the information you wish to incorporate, your quick view displays will be ready to go. You can always come back here to change these settings, and your quick view displays will be updated automatically.

      A completed quick view display created with WooCommerce Quick View Pro.

      By default, the plugin adds your quick view displays to your category pages and other areas where customers may be browsing through several items. However, you can also incorporate them into product pages, too.

      Plus, all your quick view displays will be fully responsive for mobile shoppers. Quick view lightboxes like the ones you can create with WooCommerce Quick View Pro are especially helpful for giving customers a better look at your products on smaller screens.

      Design Your User Experience

      Detailed, easy-to-view product displays are essential to the success of your online store. With quick view displays, you can point out the best qualities of each of your products, simplify browsing, and speed up the purchase process. In some cases, this might even lead to an increase in sales.

      Are you ready to up the ante on your WooCommerce store? Consider DreamPress, our managed WordPress hosting solution. With automatic updates and strong security defenses, DreamPress takes server management off your hands so you can focus on what you do best: selling products. Learn more about plan options today.



      Source link

      How to Add a Quick View Option to Your WooCommerce Products


      WooCommerce is an excellent tool for creating and managing an online store. However, there are some features it doesn’t include out of the box, such as a quick view option. Considering the importance of product displays for landing sales, this is a crucial missed opportunity.

      The good news is that, like many such issues in WordPress, you can solve this problem without too much trouble. Using the right plugin, you can easily add a quick view option to all of your products. This makes it easier for customers to examine and purchase items – and increase your conversion rate to earn more revenue!

      In this post, we’ll explain the many benefits of adding a quick view display option to each of your WooCommerce products. Then we’ll share two simple steps for doing so using WooCommerce Quick View Pro. Let’s get right to it!

      The Benefits of Including a Quick View Option for Your WooCommerce Products

      In online retail, a quick view display is a popup box that shows a product’s key details. This information might include one or several images, pricing, variations, and an Add to Cart button.

      An example of a WooCommerce quick view popup.

      Quick view displays are typically accessed by clicking a button or hovering over a product in a catalog or list view. For example, you might include quick views on your product category pages, so customers can see more information about individual products without having to navigate to their product pages.

      Quick view buttons on a product list page.

      This feature provides several benefits to your users. For instance, since they don’t have to navigate back and forth between your product lists and individual product pages, browsing becomes a lot easier. Guests can simply open the quick view display to see a product’s details, and then continue looking through the other items on the page.

      Additionally, quick view displays are an ideal place to include photo galleries, zoom options, and information about product variations and add-ons. With these additions, customers can get an up-close look at the items they’re interested in from multiple angles. They can also see each of the colors or other variations an item comes in.

      Finally, quick view displays with an Add to Cart button simplify the purchasing process. Customers can add multiple items to their carts without having to leave your category page or product list. This enables them to continue browsing without interruption, increasing the chances that they’ll buy more products.

      Ultimately, adding a quick view option is beneficial to both you and your potential customers. Enhancing your product displays with this handy feature is a simple way to make your e-commerce website easier and more enjoyable to use.

      How to Add a Quick View Option to Your WooCommerce Products (In 2 Steps)

      With the WooCommerce Quick View Pro plugin, adding quick view popup boxes for each of your WooCommerce products is fast and easy. Let’s look at how to configure and use this solution in just two steps.

      Step 1: Download, Install, and Activate WooCommerce Quick View Pro

      The first thing you’ll need to do is acquire WooCommerce Quick View Pro, and add it to your WooCommerce site. It’s important to note that you must already have WooCommerce installed and activated for this quick view plugin to work.

      To get started, head to the developer’s website and navigate to Plugins > WooCommerce Quick View Pro.

      Navigating to the plugins page on the Barn2 website.

      Here you’ll find information and pricing for the plugin; at this time, there isn’t a free version of this particular tool. Once you’ve purchased a license, you can download the WooCommerce Quick View Pro .zip file. You should also receive an email containing your license key. Make sure to take note of this, as you’ll need it to finish setting up the plugin.

      Next, make your way to your WordPress admin dashboard and navigate to Plugins > Add New. Click on Upload Plugin at the top of the screen.

      Uploading a new plugin.

      You can then select or drag-and-drop the .zip file containing the plugin, and hit Install Now. After the installation is complete, select the Activate button as well.

      Finally, with your license key in hand, access WooCommerce Quick View Pro’s settings by navigating to WooCommerce > Settings > Products > Quick View. The first field available should be the one for your license key.

      The License Key field.

      Add your license key here, then scroll down and click on the Save changes button. You’re now ready to start using the plugin.

      Step 2: Configure the Plugin’s Settings to Meet Your Needs

      Once you’ve installed and activated WooCommerce Quick View Pro, the plugin will automatically add a quick view display option to each of your products. However, you can also customize these displays to include the information you need by visiting the plugin’s settings.

      First, you’ll want to decide how your customers will open the quick view displays. You can use a button, enable the quick view to open when a customer clicks on the product image or name , or both.

      The quick view open settings.

      Leaving both of these options unchecked will disable the quick view displays entirely.

      The two fields below the Opening the Quick View check boxes will help you customize your Quick View button with your own text. You can also choose to add or remove the button icon. Next, you’ll need to decide what information you want to include in your popups. You have the option of an image, product details, or both.

      The quick view contents options.

      If you include images, you can choose to enable a gallery-style view and zoom functionality. Quick View Pro works great as a standalone WooCommerce gallery lightbox plugin. Both of these options are useful for customers who want to see variations on a product or get a closer look at fine details such as stitching.

      Using the zoom feature in a quick view display.

      If you choose to add product details to your quick view displays, you’ll also need to check the box for each item you wish to include. Your options are:

      • Reviews: These can provide social proof for your merchandise.
      • Price: An important detail for customers who are debating a purchase.
      • Short description: It helps to highlight features that could make an item more desirable.
      • Add to Cart button: A button makes purchasing fast and easy.
      • Meta information: This includes extra product information such as categories, tags, and SKU codes.

      Once you’ve selected all the information you wish to incorporate, your quick view displays will be ready to go. You can always come back here to change these settings, and your quick view displays will be updated automatically.

      A completed quick view display created with WooCommerce Quick View Pro.

      By default, the plugin adds your quick view displays to your category pages and other areas where customers may be browsing through several items. However, you can also incorporate them into product pages, too.

      Plus, all your quick view displays will be fully responsive for mobile shoppers. Quick view lightboxes like the ones you can create with WooCommerce Quick View Pro are especially helpful for giving customers a better look at your products on smaller screens.

      Design Your User Experience

      Detailed, easy-to-view product displays are essential to the success of your online store. With quick view displays, you can point out the best qualities of each of your products, simplify browsing, and speed up the purchase process. In some cases, this might even lead to an increase in sales.

      Are you ready to up the ante on your WooCommerce store? Consider DreamPress, our managed WordPress hosting solution. With automatic updates and strong security defenses, DreamPress takes server management off your hands so you can focus on what you do best: selling products. Learn more about plan options today.



      Source link