fbpx

Adding a Virtual Product to Woo-commerce

How to add a Virtual Product to your Woo Commerce Shop online

In addition to physical products which you post to your customers, you can also add virtual products which aren’t tangible and which your buyers then access via a download or a link. WooCommerce offers two types of intangible products: virtual and downloadable.

Sometimes a product might be virtual and sometimes it might be both virtual and downloadable, for example:

  • a website subscription would be virtual but not downloadable
  • a service would be virtual but not downloadable
  • an e-book would be both virtual and downloadable

In this tutorial, we set up both of these products to demonstrate how you add virtual and downloadable products.

What You’ll Need

To complete this tutorial you’ll need:

  • an installation of WordPress, with Administrator access
  • the WooCommerce  free plugin installed and activated
  • WooCommerce settings configured.

Adding a Virtual Product

First, You need to add a new product via the Products->Add New screen, and give it a title, description and product image:

Product Data – General

Next, in the product editing screen, you can configure the Product Data metabox. Start by defining the product as virtual by ticking the Virtual checkbox. This makes the Shipping tab disappear.

In the General tab, add the price, SKU and tax rate as with any other product.
Product Data – Inventory

As this is a virtual product, you don’t need to manage inventory, so deselect the Manage stock? option in the Inventory tab:
adding-virtual-products-to-woocommerce-settings-inventory

Product Data – Advanced

For this product we do not need to add any linked products or attributes so we will move on to the Advanced tab:
adding-virtual-products-to-woocommerce-settings-advanced

Here you can add a note which will be sent to anyone buying this product. As this is a subscription you can provide a link which buyers will need to follow to complete the subscription process.

Finally, click Update to save the changes to the product and view it.

Adding a Downloadable Product

Virtual products aren’t all that different from physical products in the way they’re set up on your site: the only difference is that they can’t be posted to your Customers. Downloadable products are more distinct from physical products as you have to set up the download process.

To create a downloadable product, first set up the product as you would any other product type, giving it a title, description and image:
adding-downloadable-products-to-woocommerce-starting-product

Then in the Product Data metabox, select both Virtual and Downloadable.

Product Data – General

Once you’ve done this, the Shipping tab will disappear and the General tab will expand:
adding-downloadable-products-to-woocommerce-settings-general

As well as adding the usual price, SKU and tax details, you also need to add download details. You can do this in one of two ways:

  • Input a link to the file for download, which is the best option if the file is very large, if it is hosted elsewhere or if you’ve already uploaded it via the media manager in WordPress.
  • Click the Choose file button to upload the file to your shop. This will be useful for smaller files you want to host on your own site.

Product Data – Inventory

As the product is not limited by stock numbers, you need to turn off stock management in the Inventory tab:
adding-downloadable-products-to-woocommerce-settings-inventory
Simply uncheck the Manage stock? checkbox to disable this feature. In some cases you might want to enable stock management, for example if you’re selling tickets to an event.

Product Data – Linked Products

You can add linked products to downloadable products in the same way as you would for physical products, and these don’t have to be other downloadable products.
adding-downloadable-products-to-woocommerce-settings-linked-products

Product Data – Attributes

The next step is to define attributes for your product, using the attributes you already set up when configuring your product settings:
adding-downloadable-products-to-woocommerce-settings-attributes

For each attribute you want to select terms from:

  1. Select the attribute from the Custom product attribute drop down box.
  2. Click Add.
  3. Click the Value(s) field and select the relevant term(s) from the drop down box.

Note: You can add new attributes here by selecting Custom product attribute before clicking Add, and then entering the details of your new attribute. This will add the attribute to the list in your Attributes screen. But don’t forget that attributes are taxonomies, not terms, so don’t use this method to create new terms for an existing attribute.

Example here: Added a term from the ‘level’ attribute.

Product Data – Advanced

The final tab is the Advanced tab:
adding-downloadable-products-to-woocommerce-settings-advanced
Here you can add a note which buyers will see after purchasing the product, define whether reviews are enabled and specify a menu order for ordering your products in archive pages.

Once you’ve done all this, click Publish and view your product:

As you can see, the product has linked products displayed and as I set the price to 0, it’s showing on the product page as Free!.

Downloadable Products – the Purchase Process

When someone buys your downloadable product they will receive a link which they can use to make the download. They will see this on screen after making the purchase and also receive an email:

Here’s what buyers will see after a successful purchase has gone through
adding-downloadable-products-to-woocommerce-download-page

As you can see, there’s a link displayed which they can use. As I set the download limit to 1 in the Product Data – General tab, they will only be able to use this link once. This prevents buyers from sending the link to their friends.

Buyers will also receive an email with the link:
The Colors and Layout of the Email can be further customized.
adding-downloadable-products-to-woocommerce-customer-email

Image Sizes

Images Sizes and why they are important!

Have you ever had your web designer ask for a larger image or an image with higher resolution? Did it leave you confused and wondering what exactly the designer was talking about? Or have you had a designer tell you that they cannot use an image and you think they were being stubborn about the image? Image resolution can play a huge part in the overall feel of your website. In many ways, it is what creates the difference between an amateur looking website versus a more polished, professional site. So, let’s get into the nitty-gritty of image resolution and why the size of your image does in fact matter a great deal.

What is Image Resolution?

According to the Merriam Webster dictionary, image resolution is “a measure of the sharpness of an image or of the fineness with which a device (such as a video display, printer, or scanner) can produce or record such an image usually expressed as the total number or density of pixels in the image.” To further explain the definition, the image size is described in pixels of width and height. If you see an image with a measurement of 1248×650, that means the image is 1248 pixels wide and 650 pixels high. To avoid getting too technical, a pixel is a measurement. It basically signifies how many tiny squares of various colors, make up that image.

What Happens to an Image that is Too Small?

Now that we understand what image resolution is, why is it important? An image that is too small for the space if used will look distorted and pixelated. If you have ever seen Minecraft than that will give you an idea of what pixelated is with it box structures. Seeing pixels might be just fine for Minecraft, but it does not create a good-looking image for a website. How do I Find the Size of my Image? Finding the image size is fairly easy. On a Mac, you can right-click on the image file in Finder and click “Get Info” from the menu. All the information pertaining to the image will pop up. Find Dimensions and that will be your image size. Remember it is width x height. In Windows, you need to right-click then click “Properties,” from the menu. In the properties window that opens up, click the “Details” tab and look for the image’s Dimensions.

What Size Should my Images Be?

A designer can always scale down an image, but should never scale it up. In other words, a large image can be shrunk to fit a smaller area, but a smaller image cannot be enlarged without affecting the look of an image. A designer would rather you sent them an image that was 5847×2658, even if they only need it for a space 640x480px. They can take this image and resize and even compress it to the correct size for the website. A minimum of 1280px wide should work for most website uses. Though if it’s going in a large, full-width space, it may need to be more than double that: 2560px wide. If you just don’t have a high enough resolution version of an image for what’s needed, don’t be disappointed if your web designer says it’s just not usable in the place you wanted it.

Is it Okay to Stretch My Image?

Images don’t stretch! They are not yoga masters. When adjusting image size, it needs to be done proportionally or the image will look elongated or squashed. It’s like one of those mirrors that make you look super skinny and tall or fat and short. Images should only be shrunk proportionally. That means adjusting an image while preserving the aspect ratio. In other words, maintaining the same proportion of horizontal vs. vertical pixels. As designers, we don’t stretch images, but we will scale them proportionally or crop them if needed to fit in a space.

What to Send Your Web Designer

So remember: always send your web designer the highest resolution version of the image that you have. And don’t stretch, shrink, or crop it. Trust the web designer to do that.

Free or Open Source Google Map Alternatives

Google Maps Alternatives

Google Maps is a basic web mapping service application and technology provided by Google.Created by Google
Google Maps for your Website are Great but Google has introduced Billing, meaning that you will need to open a Billing Account with them (with Credit Card etc) so they can bill you once you reach a certain amount of hits to the Map you have on your Website. Most small Websites will not have to pay as you will need to reach a certain amount of hits but you will STILL need a Billing Account, otherwise the Map will NOT display correctly anymore.
More Details about that are here.

Here are some free Alternatives you could use instead of Google Maps.

  • OpenStreetMap
    • OpenStreetMap (OSM) is a collaborative project to create a free editable map of the world.
    • OpenStreetMap is a project aimed squarely at creating and providing free geographic data such as street maps to anyone who wants them. It is a free editable map of the whole world. It is made by people like you. It allows you to view, edit and use geographical data in a collaborative way from anywhere on Earth.
  • MAPS.ME
    • Fast, detailed and completely offline maps for mobile devices Created by My.com
    • MAPS.ME offers the quickest offline maps of all the countries of the world. Travel with full confidence: wherever you are, MAPS.ME addresses all your offline mapping needs.

      Need a map of London or a map of New York? A map of Paris or Rome? Any country, any place, from the largest cities to small villages, in MAPS.ME!

  • OsmAnd
    • Global mobile map viewing and navigation for online and offline OSM maps Created by OsmAnd team
    • OsmAnd is a map and navigation application with access to the free, worldwide, and high-quality OpenStreetMap data.
      Enjoy voice and optical navigator, viewing POIs (points of interest), creating and managing GPX tracks, using contour lines visualization and altitude info (through plugin), a choice between driving, cycling, pedestrian modes, OSM editing and much more.
  • Leaflet
    • Leaflet is a modern open-source JavaScript library for mobile-friendly interactive maps. Created by Vladimir Agafonkin
    • Leaflet is a modern open-source JavaScript library for mobile-friendly interactive maps. It is developed by Vladimir Agafonkin with a team of dedicated contributors. Weighing just about 28 KB of JS code, it has all the features most developers ever need for online maps.
      Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms out of the box, taking advantage of HTML5 and CSS3 on modern browsers while still being accessible on older ones. It can be extended with many plugins, has a beautiful, easy to use and well-documented API and a simple, readable source code that is a joy to contribute to.

  • Qwant Maps
    • Qwant Map, still in alpha, is designed to be an alternative to Google Maps, based on OpenStreetMap Created by Qwant SAS
    • Qwant Map, still in alpha, is designed to be an alternative to Google Maps, based on OpenStreetMap
  • Marble
    • Marble is a Virtual Globe and World Atlas that you can use to learn more about Earth: You can pan… Created by KDE
    • Marble is a Virtual Globe and World Atlas that you can use to learn more about Earth: You can pan and zoom around and you can look up places and roads. A mouse click on a place label will provide the respective Wikipedia article.
  • uMap
    • uMap let you create maps with OpenStreetMap layers in a minute and embed them in your site. Created by OpenStreetMap.org
    • This nifty OpenStreetMap project lets you create maps with OpenStreetMap layers in a minute and embed them in your site.
      * Choose the layers of your map
      * Works in your browser, even on mobile
      * Add POIs: markers, lines, polygons, heatmaps, …
      * Manage POIs appearance, colours and icons
      * Manage map options: display a minimap, locate user on load…
      * Batch import geostructured data (geojson, gpx, kml, osm…)
      * Choose the license for your data
      * Allow users to search your data
      * Free uMap
  • TransforMap
    • There are Plenty of Alternatives. TransforMap makes them visible.
    • TransforMap works towards an online platform for you to visualize the myriads of alternatives to the dominant economic thinking on a single mapping system.

Hassle-free WordPress Setup

Setup a new WordPress website with our hassle-free full-service install package.

How Much Is It?

  • € 79.00
  • What’s Included:
  • WordPress Theme Install
  • Front Page Demo Content
  • Social Media Buttons
  • Google Analytics Hookup
  • Documentation

What are the steps?

We will setup a theme of your Choice on your WordPress website for your blog or business. In the case of a Free WordPress Theme we will download, unzip and install it for you, if you prefer one of the many commercial themes you need to buy it first and then send it to us or we can buy it for you and then install it.
If you’re new to WordPress or don’t have the time to learn all of the ins-and-outs, we’ll get you up and running — hassle-free.

Step 1: Install the theme on your WordPress website.

Step 2: Setup the homepage of your website like the theme demo.

Step 3: Setup  your social media links.

Step 4: Setup an SEO plugin and prep your site for Google Analytics.

Step 5: Enjoy your new WordPress website!

What if I need more help?

If you need more than a basic theme install, contact us.

Benefits of Single Page Websites

Single page designs have the following advantages over multi-page sites:

  • No page refresh when navigating the site (content is either in the page or loaded using Ajax)
  • User experience can be improved because navigating through content is quicker and more responsive than having to go to a new web page
  • Easier maintenance because you only have to maintain one web page
  • You can design for quality over quantity — instead of having to design multiple page layouts for different types of site content, you can focus on just one solid and high-quality design
  • Your Google PageRank applies to the whole site
  • Higher core content density for search engine spiders
  • Distinction from most other websites; single page websites are less common, and can thus leave an impression on your site visitors (and that’s why they are popular on portfolio sites)
  • Easy solution for simple “brochure” sites that serve one product (i.e. iPhone app) or one purpose (i.e. a designer’s work)
  • Preferred solution for web apps designed for the Mobile Web
  • Most likely cheaper than Multi Page Websites

Is Single Page Websites for You?

The truth is that whenever you implement a specific design pattern, chances are that you will not be able to please everyone. While single page sites can be made to be 100% accessible and highly usable, there will be situations where a single page site is not a good option for you. For example, an e-commerce site such as Amazon.com wouldn’t be able to pull off a single page web design successfully because of its vast amount of content — and that’s fine because it’s better when these types of sites are multiple pages.

The great thing about the web is that it’s constantly evolving, and by principle, the way we build our designs will mould itself to these shifts in our audience’s tastes and needs.

The need for lightweight, compact, self-contained websites and web applications due to the Mobile Web will only increase the deployment of single page websites. All single page layouts can be made to look totally unique. While not to everyone’s taste, they are well worth a consideration in your web design projects.

PawFriends – Pet Shop and Veterinary Theme

Petfriends Homepage

Where Pets Come First!

Need a new site for your pet center or veterinary clinic? Here’s the ideal theme made just for that, & it answers to the name of PawFriends.

Introducing PawFriends, your new online pal who’ll help you build a pet shop or veterinary clinic website with total ease. Designed for all types of pet care online presentations, PawFriends will enable you to build a website that you’re going to love like your own pet!

Key Features Colorful and Fun Style, Three Color Styles, Modern Elements, Shop, Wishlist, Quick View
Ideal for: Pet Shops, Veterinary Clinics, Pet Sitters and Dog Walking Services, Dog Grooming Salons, Animal Shelters

Available Layouts:

Default HomePage Layout
Animal Shelter
Veterinary Home
Pet Sitting Business
Pet Shop
Grooming Salon

Plugins and modules included

Contact Form 7 – A neat, clean and professional way to create your contact forms. Fully compatible with this simple yet very practical plugin.
Slider Revolution – Display your content in a beautiful manner! Bundled for free with the theme is the remarkable Slider Revolution Responsive plugin.
WooCommerce – Get your online store up and running in no time thanks to the full compatibility with the astounding WooCommerce plugin!
WP Bakery – Easily add & rearrange elements on your pages. One of the best drag-and-drop page builder plugins around comes bundled for free.
WPML – You can create multilingual websites with total ease. Fully compatible with the practical WordPress Multilingual plugin.

Eight (small) ways to reduce your IT Carbon Footprint

Internet Carbon Footprint

Whether it’s from doing things like burning fossil fuels through driving, cranking up the furnace or grilling a steak, we are all responsible for releasing carbon dioxide into the atmosphere, which is called our carbon footprint. When we collectively produce more carbon than the planet can absorb, the extra CO2 contributes to climate change. Even less obvious daily activities add to our carbon footprint, such as using the internet.

If you are like me and spend a lot of time or even the WHOLE day online, you are contributing in some small way to releasing some carbon dioxide.

While the internet’s data is essentially invisible, it is processed and stored in massive data centers all over the world. Those data centers are powered 24/7, just waiting to send information — videos, podcasts, music, news, memes, messages and everything the internet offers — to our digital devices. All that data that we’ve grown accustomed to having fast at our fingertips along with our always-on mentality ends up contributing to our digital carbon footprints.

Measuring our individual impact isn’t easy, but you can take steps to reduce it. Here are eight things you can do:

1. Adjust power settings

Set your computer to go into sleep or hibernate to conserve energy when you’re taking a break. Shutting down your computer and turning off your monitor and printer altogether when they’re not in use will save even more.

2. Lower your monitor brightness

A tip from Harvard Law School’s energy manager suggests that dimming your monitor from 100% to 70% can save up to 20% of the energy the monitor uses. Plus, lowering brightness reduces eye strain.

3. Turn on strict tracking protection

Data tracking services gobble up mountains of information. On nearly every single website you visit, data about you was transmitted to dozens or even hundreds of companies. Firefox now comes with Enhanced Tracking Protection, which protects you from the pervasive tracking and collection of personal data by ad networks and third party trackers. Setting your preferences to the Strict setting will block most data transfers and processing. That also equates to less energy being used, though some sites may break.

4. Download instead of stream

Streaming music and videos adds to your digital carbon footprint, according to at least one researcher. Opting to download rather than stream means you’ll pull the data from the server only once. Some streaming services do a better job of mitigating their impact than others, according to the Click Clean Report from Greenpeace.

5. Reuse your searches

It turns out that a good deal of search queries — the things you type into a search engine — are navigational, meaning you’re not necessarily looking to find something so much as you are looking to go somewhere that you’ve already been. An example would be that you search for twitter.com to go to your Twitter feed. Using search rather than simply going to the site sends the information from your browser to the search engine servers for data processing before returning a list of search results to your browser.

That processing contributes to your digital carbon footprint, but there is another way: the Firefox Address Bar, AKA the “Awesomebar”. Just start typing in the address bar and the autocomplete drop-down will show matching web pages from your browsing history, open tabs, sync’ed web pages, as well as pages you’ve bookmarked or tagged. Instead of processing a search, you can hop directly to your destination, and that will bring your search carbon footprint to nil.

6. Block video autoplay

Playing videos uses more energy, so why not nip it in the bud by stopping videos you don’t necessarily even want to watch from playing in the first place. The latest Firefox blocks videos with sound from autoplaying by default, and coming in September you’ll be able to block video autoplay as well.

7. Offset your digital carbon footprint

Ecosia is a search engine that funds tree planting from the profit it makes through online searches. In fact, Ecosia estimates that Firefox users have planted 20,000 trees, offsetting up to 960,000 pounds of carbon emissions per year. Way to go, Firefox fans! Learn more about how to calculate and offset your carbon footprint at Carbonfund.org.

8. Get bored

That’s right. Instead of turning to your phone every time you have a minute, daydream, people-watch or listen to life happening around you instead. Not only will you do a good deed for the environment (albeit a tiny one), you’ll do a good deed for your brain. You might find a bit of brilliance in your boredom.

Short of a large number of us unplugging altogether, none of these steps will take a giant bite out of your digital carbon footprint, but they’re a start. Remember when we didn’t recycle, turn the water off when brushing teeth, let it mellow when yellow or compost food waste unless we were farmers? Small actions today can lead to bigger changes in the future.

This article first published on TechRadarPro.

X

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close