woocommerce link to product

WooCommerce Docs

Documentation, Reference Materials, and Tutorials for your WooCommerce products

Linking a project to a product

Since Projects 1.2.0, linking a project to a WooCommerce product can be easily achieved to provide visitors with a way to purchase a project from the project page.

Install WooCommerce ↑ Back to top

First of all you need to install our WooCommerce plugin. This will give you access to all the WooCommerce goodness of which you can use as much or as little as necessary. You will at least need to configure your general store settings, payment gateway(s), shipping and product data. You can find getting-started instructions for WooCommerce here.

Add a product ↑ Back to top

Before a product can be linked to a project, it needs to be published. Add products via the “Products” menu item, just as you would add a post. Read about adding and managing products here.

Add a project ↑ Back to top

Likewise, for a product to link to a project the project needs to exist. Add a project as described in the documentation.

Link a product to a project ↑ Back to top

Once you’ve added a product and a project you can now link them together. To do so, navigate to the edit project page and notice the new meta field available to you titled “Product“. Begin typing in this field to see a list of matching products.

Linking a product

Once linked, save the project.

That’s it! Done! A button to add the linked product to the cart will now appear on the single project page.

An example project with a linked product – note the purchase button.

Relevant Links

All Projects Documentation

How to Get Help

WooCommerce – the most customizable eCommerce platform for building your online business.

Description

With this plugin you can link your product to an external page, or just open a modal containing a note, an inline content, or a content in other page of the same domain. These links can be displayed on regular woocommerce’s product positions (after add to cart button, before add to cart button, etc.), or you use a shortcode instead to decide where those links appears.

If you want to help me in writing more code or better poetry, please invite me to a beer (or coffee, maybe) by sending your thanks to http://paypal.me/ernestortiz. Thanks in advance.

Screenshots

  • The options page (retailer / Anchors options).
  • The options page (Link options).
  • The product page.

Installation

  1. Upload unzipped plugin directory to the /wp-content/plugins/ directory, or install the plugin through the WordPress plugins screen directly.
  2. Activate the plugin through the ‘Plugins’ screen in WordPress.

Well, shortcodes can be used as widgets using the text widget. Just write the shortcode on the text widget content; for example [wclinks2product]

Where can I add retailers?

Please, go to the options page, to add retailer / anchors.
Note that this plugin is not only for link to a retailer; you can also link to any external webpage, as well as show a modal containing information.

How can I get the modal content?

The url that you write on the field ‘Link to the product’ decides the behaviour when you click on the button. For example:

amazon.es
This is an external link; so it will open the corresponding page on a new window.

#extra-info
In this case, a modal will pop up, showing the inner content on the inline element width id ‘extra-info’. Of course, you can use here a class name instead of an id. For example:

.info.extra
The plugin will try to hide those inline elements that will appears in the modal, in case you forgot to do that.

#
If this is the case, the plugin popup a modal containing an html note that you wrote. Previously, you should go to the plugin options and add the extra field of “Note”, and of course write some note; otherwise, the button does not appear.

http://samedomain.com/otherpage.php #info
In this case, the content of a modal is taking from the element with id ‘info’ which is inside other webpage (on the same domain). Please, note the space before ‘#info’

How can I change the look of the modal, buttons, etc.

Please, feel free of change the styles on the css files of the plugin, until you reach what you want. Remember to write your style on your theme (for example) or elsewhere, or it will be erased when updating the plugin.

Leave a Reply

Your email address will not be published. Required fields are marked *