Docs: Update go-vip.net links/images to developer.woo.com (#43863)
* Update go-vip.net links/images to developer.woo.com * Update go-vip.net links (with correct /) * Force git to work * Flx links * fixing-image-links --------- Co-authored-by: Brent MacKinnon <brent.mackinnon@a8c.com>
This commit is contained in:
parent
139150134f
commit
4eb8626621
|
@ -206,7 +206,7 @@ The priority argument is set during the [add_action](https://developer.wordpress
|
|||
|
||||
In the example below, blue text is the name of the hook we're modifying, green text is the name of our custom function, and red is the priority we set.
|
||||
|
||||
![Setting priority for the hooked function](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/priority-markup.png)
|
||||
![Setting priority for the hooked function](https://developer.woo.com/wp-content/uploads/2023/12/priority-markup.png)
|
||||
|
||||
## Examples
|
||||
|
||||
|
@ -295,7 +295,7 @@ function my_custom_checkout_field_display_admin_order_meta($order){
|
|||
}
|
||||
```
|
||||
|
||||
![adding custom sthipping and billing fields](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/Webp-to-PNG-Shipping-Field-Hook.png)
|
||||
![adding custom sthipping and billing fields](https://developer.woo.com/wp-content/uploads/2023/12/Webp-to-PNG-Shipping-Field-Hook.png)
|
||||
|
||||
It's alive!
|
||||
|
||||
|
@ -333,7 +333,7 @@ function my_custom_checkout_field( $checkout ) {
|
|||
|
||||
This gives us:
|
||||
|
||||
![WooCommerce Codex - Checkout Field Hook](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/WooCommerce-Codex-Checkout-Field-Hook.png)
|
||||
![WooCommerce Codex - Checkout Field Hook](https://developer.woo.com/wp-content/uploads/2023/12/WooCommerce-Codex-Checkout-Field-Hook.png)
|
||||
|
||||
Next we need to validate the field when the checkout form is posted. For this example the field is required and not optional:
|
||||
|
||||
|
@ -353,7 +353,7 @@ function my_custom_checkout_field_process() {
|
|||
|
||||
A checkout error is displayed if the field is blank:
|
||||
|
||||
![WooCommerce Codex - Checkout Field Notice](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/WooCommerce-Codex-Checkout-Field-Notice.png)
|
||||
![WooCommerce Codex - Checkout Field Notice](https://developer.woo.com/wp-content/uploads/2023/12/WooCommerce-Codex-Checkout-Field-Notice.png)
|
||||
|
||||
Finally, let's save the new field to order custom fields using the following code:
|
||||
|
||||
|
@ -389,7 +389,7 @@ function my_custom_checkout_field_display_admin_order_meta( $order ){
|
|||
|
||||
This is the result:
|
||||
|
||||
![checkout_field_custom_field_admin](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/checkout_field_custom_field_admin.png)
|
||||
![checkout_field_custom_field_admin](https://developer.woo.com/wp-content/uploads/2023/12/checkout_field_custom_field_admin.png)
|
||||
|
||||
### Make phone number not required
|
||||
|
||||
|
|
|
@ -66,7 +66,7 @@ tags: tag1, tag2, tag3
|
|||
|
||||
To help reduce sidebar clutter, you can optionally tag content types in Front Matter. The supported tags are `reference`, `how-to`, and `code-snippet`. Content tagged with one of these types will appear under a sub-heading in its category on the sidebar and on the category's page. Untagged pages will appear at the top of the category.
|
||||
|
||||
![Untagged docs appear at the top of the sidebar and category page, and tagged docs appear under with a heading](https://woo-docs-multi-com.go-vip.net/docs/wp-content/uploads/sites/3/2024/01/CleanShot-2024-01-15-at-14.01.16@2x.png)
|
||||
![Untagged docs appear at the top of the sidebar and category page, and tagged docs appear under with a heading](https://developer.woo.com/docs/wp-content/uploads/sites/3/2024/01/CleanShot-2024-01-15-at-14.01.16@2x.png)
|
||||
|
||||
Tags other than `reference`, `how-to` and `code-snippet` will function like regular WordPress tags. While you're welcome to include any tags you think are relevant, you should only tag a page with a maximum of one of the three special tags.
|
||||
|
||||
|
|
|
@ -6,7 +6,7 @@ tags: reference
|
|||
|
||||
For core development, we use the following structure and flow.
|
||||
|
||||
![Git Flow WooCommerce uses for core development](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/flow-1.png)
|
||||
![Git Flow WooCommerce uses for core development](https://developer.woo.com/wp-content/uploads/2023/12/flow-1.png)
|
||||
|
||||
## Branches
|
||||
|
||||
|
|
|
@ -74,4 +74,4 @@ addFilter(
|
|||
|
||||
Here's a screen shot using our new custom store management link:
|
||||
|
||||
![screen shot of custom store management link in wp-admin](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/yvXeSya.png)
|
||||
![screen shot of custom store management link in wp-admin](https://developer.woo.com/wp-content/uploads/2023/12/yvXeSya.png)
|
||||
|
|
|
@ -8,7 +8,7 @@ WooCommerce has its own robust system for logging, which can be used for debuggi
|
|||
|
||||
Depending on the log handler(s) used, you can view the entries created by the logger by going to **WooCommerce > Status > Logs**.
|
||||
|
||||
![Log file viewer](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/log-critical.jpg)
|
||||
![Log file viewer](https://developer.woo.com/wp-content/uploads/2023/12/log-critical.jpg)
|
||||
|
||||
## Log levels
|
||||
|
||||
|
|
|
@ -10,7 +10,7 @@ Before you start, check out [WooCommerce Endpoints](./docs/woocommerce-endpoints
|
|||
|
||||
The URL for each endpoint can be customized in **WooCommerce > Settings > Advanced** in the Page setup section.
|
||||
|
||||
![Endpoints](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/endpoints.png)
|
||||
![Endpoints](https://developer.woo.com/wp-content/uploads/2023/12/endpoints.png)
|
||||
|
||||
Ensure that they are unique to avoid conflicts. If you encounter issues with 404s, go to **Settings > Permalinks** and save to flush the rewrite rules.
|
||||
|
||||
|
@ -18,7 +18,7 @@ Ensure that they are unique to avoid conflicts. If you encounter issues with 404
|
|||
|
||||
If you want to include an endpoint in your menus, you need to use the Links section:
|
||||
|
||||
![The Links section of a menu item in WordPress](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/2014-02-26-at-14.26.png)
|
||||
![The Links section of a menu item in WordPress](https://developer.woo.com/wp-content/uploads/2023/12/2014-02-26-at-14.26.png)
|
||||
|
||||
Enter the full URL to the endpoint and then insert that into your menu.
|
||||
|
||||
|
@ -76,4 +76,4 @@ Landing on the wrong page when clicking an endpoint URL is typically caused by i
|
|||
|
||||
Sometimes the "Downloads" endpoint on the "My account" page does not need to be displayed. This can be removed by going to **WooCommerce → Settings → Advanced → Account endpoints** and clearing the Downloads endpoint field.
|
||||
|
||||
![Account endpoints](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/Screenshot-2023-04-09-at-11.45.58-PM.png)
|
||||
![Account endpoints](https://developer.woo.com/wp-content/uploads/2023/12/Screenshot-2023-04-09-at-11.45.58-PM.png)
|
||||
|
|
|
@ -46,4 +46,4 @@ Landing on the wrong page when clicking an endpoint URL is typically caused by i
|
|||
|
||||
Sometimes the "Downloads" endpoint on the "My account" page does not need to be displayed. This can be removed by going to **WooCommerce → Settings → Advanced → Account endpoints** and clearing the Downloads endpoint field.
|
||||
|
||||
![Account endpoints](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/Screenshot-2023-04-09-at-11.45.58-PM.png)
|
||||
![Account endpoints](https://developer.woo.com/wp-content/uploads/2023/12/Screenshot-2023-04-09-at-11.45.58-PM.png)
|
||||
|
|
|
@ -11,7 +11,7 @@ To activate High-Performance Order Storage, existing stores will firs t need t
|
|||
1. Navigate to **WooCommerce > Settings > Advanced > Features**
|
||||
2. Turn on the **"Enable compatibility mode (synchronizes orders to the posts table)"** setting.
|
||||
|
||||
![Enable HPOS Screen](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/New-Project-4.jpg)
|
||||
![Enable HPOS Screen](https://developer.woo.com/wp-content/uploads/2023/12/New-Project-4.jpg)
|
||||
|
||||
3. Once this setting is activated, background actions will be scheduled.
|
||||
|
||||
|
@ -20,8 +20,8 @@ To activate High-Performance Order Storage, existing stores will firs t need t
|
|||
- You can either wait for these actions to run on their own, which should be quite soon, or you can go to **WooCommerce > Status > Scheduled Actions**, find the actions and click on the run button.
|
||||
- The action will backfill 25 orders at a time, if there are more orders to be synced, then more actions will be scheduled as soon as the previous actions are completed.
|
||||
|
||||
![wc_schedule_pending_batch_process Screen](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/2.jpg)
|
||||
![wc_run_batch_process Screen](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/New-Project-5.jpg)
|
||||
![wc_schedule_pending_batch_process Screen](https://developer.woo.com/wp-content/uploads/2023/12/2.jpg)
|
||||
![wc_run_batch_process Screen](https://developer.woo.com/wp-content/uploads/2023/12/New-Project-5.jpg)
|
||||
|
||||
4. After both tables are successfully synchronized, you'll be able to select the option to switch to High-Performance Order Storage (HPOS).
|
||||
|
||||
|
|
|
@ -34,17 +34,17 @@ If you're new to translating, check out the [translators handbook](https://make.
|
|||
1. Go to [translate.wordpress.org](https://translate.wordpress.org/projects/wp-plugins/woocommerce) and look for your language in the list.
|
||||
2. Click the title to be taken to the section for that language.
|
||||
|
||||
![screenshot of WooCommerce translation page on wordpress.org](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/2016-02-17-at-09.57.png)
|
||||
![screenshot of WooCommerce translation page on wordpress.org](https://developer.woo.com/wp-content/uploads/2023/12/2016-02-17-at-09.57.png)
|
||||
|
||||
3. Click the heading under `Set/Sub Project` to view and download a Stable version.
|
||||
|
||||
![list of versions available for selected language](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/2016-02-17-at-09.59.png)
|
||||
![list of versions available for selected language](https://developer.woo.com/wp-content/uploads/2023/12/2016-02-17-at-09.59.png)
|
||||
|
||||
4. Scroll to the bottom for export options. Export a `.mo` file for use on your site.
|
||||
|
||||
5. Rename this file to `woocommerce-YOURLANG.mo` (e.g., Great Britain English should be `en_GB`). The corresponding language code can be found by going to [https://translate.wordpress.org/projects/wp-plugins/woocommerce/](https://translate.wordpress.org/projects/wp-plugins/woocommerce/) and opening the desired language. The language code is visible in the upper-right corner.
|
||||
|
||||
![screenshot of plugin card with associated language code](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/Screenshot-2023-10-17-at-09.44.53.png)
|
||||
![screenshot of plugin card with associated language code](https://developer.woo.com/wp-content/uploads/2023/12/Screenshot-2023-10-17-at-09.44.53.png)
|
||||
|
||||
6. Upload to your site under `wp-content/languages/woocommerce/`. Once uploaded, this translation file may be used.
|
||||
|
||||
|
@ -61,12 +61,12 @@ To get started:
|
|||
1. Open PoEdit and select `Create new translation from POT template`.
|
||||
2. Choose `woocommerce.pot` and PoEdit will show the catalog properties window.
|
||||
|
||||
![screenshot](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/Screen-Shot-2013-05-09-at-10.16.46.png)
|
||||
![screenshot](https://developer.woo.com/wp-content/uploads/2023/12/Screen-Shot-2013-05-09-at-10.16.46.png)
|
||||
|
||||
3. Enter your name and details, so other translators know who you are, and click `OK`.
|
||||
4. Save your `.po` file. Name it based on what you are translating to, i.e., a GB translation is saved as `woocommerce-en_GB.po`. Now the strings are listed.
|
||||
|
||||
![screenshot](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/Screen-Shot-2013-05-09-at-10.20.58.png)
|
||||
![screenshot](https://developer.woo.com/wp-content/uploads/2023/12/Screen-Shot-2013-05-09-at-10.20.58.png)
|
||||
|
||||
5. Save after translating strings. The `.mo` file is generated automatically.
|
||||
6. Update your `.po` file by opening it and then go to `Catalog > Update from POT file`.
|
||||
|
@ -116,7 +116,7 @@ There are some other third-party tools that can help with translations. The foll
|
|||
|
||||
You may see that some of the strings are not being translated on the Checkout page. For example, in the screenshot below, `Local pickup` shipping method, `Cash on delivery` payment method and a message related to Privacy Policy are not being translated to Russian while the rest of the form is indeed translated:
|
||||
|
||||
![checkout page with some strings not translated](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/not_translated.jpg)
|
||||
![checkout page with some strings not translated](https://developer.woo.com/wp-content/uploads/2023/12/not_translated.jpg)
|
||||
|
||||
This usually happens when you first install WooCommerce and select default site language (English) and later change the site language to another one. In WooCommerce, the strings that have not been translated in the screenshot, are stored in the database after the initial WooCommerce installation. Therefore, if the site language is changed to another one, there is no way for WooCommerce to detect a translatable string since these are database entries.
|
||||
|
||||
|
@ -153,8 +153,8 @@ If some of your translated strings don't show up as expected on your WooCommerce
|
|||
|
||||
This screenshot shows that the Singular translation is available:
|
||||
|
||||
![This screenshot shows that the Singular translation is available:](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/Screenshot-2023-10-17-at-10.10.06.png)
|
||||
![This screenshot shows that the Singular translation is available:](https://developer.woo.com/wp-content/uploads/2023/12/Screenshot-2023-10-17-at-10.10.06.png)
|
||||
|
||||
While this screenshot shows that the Plural translation is not available:
|
||||
|
||||
![this screenshot shows that the Plural translation is not available](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/Screenshot-2023-10-17-at-10.10.21.png)
|
||||
![this screenshot shows that the Plural translation is not available](https://developer.woo.com/wp-content/uploads/2023/12/Screenshot-2023-10-17-at-10.10.21.png)
|
||||
|
|
|
@ -43,7 +43,7 @@ Like everything in the new product form, each extension point is a separate bloc
|
|||
|
||||
The new product form consists of groups currently displayed as tabs. Each is a separate view and may contain any number of sections and subsections. All areas serve a specific purpose, allowing merchants to quickly find the information they're looking for (both in default Woo features and extensions).
|
||||
|
||||
![Product form groups](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/product-editor-ext-guidelines-form-groups.gif)
|
||||
![Product form groups](https://developer.woo.com/wp-content/uploads/2023/12/product-editor-ext-guidelines-form-groups.gif)
|
||||
|
||||
If a tab doesn't contain any sections, it won't be shown to merchants.
|
||||
|
||||
|
@ -92,7 +92,7 @@ With so much advanced functionality, the plugin would best register a new produc
|
|||
|
||||
### Fields
|
||||
|
||||
![Fields example](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/product-editor-ext-guidelines-fields.png)
|
||||
![Fields example](https://developer.woo.com/wp-content/uploads/2023/12/product-editor-ext-guidelines-fields.png)
|
||||
|
||||
Fields are the simplest type of extension. They let users add extra product information, replace or manage the visibility of other fields assigned to a specific product type, and control the contents of other fields.
|
||||
|
||||
|
@ -117,7 +117,7 @@ Field extensions should always be logically related to the form area they are in
|
|||
|
||||
### Subsections
|
||||
|
||||
![Subsections example](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/product-editor-ext-guidelines-subsections.png)
|
||||
![Subsections example](https://developer.woo.com/wp-content/uploads/2023/12/product-editor-ext-guidelines-subsections.png)
|
||||
|
||||
Subsections add extra fields to existing form groups. They are small forms with a low to medium level of complexity. This interface location works best for extensions that add extra features that build off an existing Woo functionality.
|
||||
|
||||
|
@ -145,7 +145,7 @@ If you're developing an extension that allows merchants to upload 360 images or
|
|||
|
||||
### Sections
|
||||
|
||||
![Sections example](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/product-editor-ext-guidelines-sections.png)
|
||||
![Sections example](https://developer.woo.com/wp-content/uploads/2023/12/product-editor-ext-guidelines-sections.png)
|
||||
|
||||
Sections are significant parts of the form that may consist of multiple subsections and fields. They should be used sparsely throughout the form, so merchants are not overwhelmed with options while filling out the information about their products.
|
||||
|
||||
|
@ -173,7 +173,7 @@ If you're working on an extension that allows merchants to offer discounts based
|
|||
|
||||
### Top bar (header) *(future feature)*
|
||||
|
||||
![Top bar example](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/product-editor-ext-guidelines-top-bar.png)
|
||||
![Top bar example](https://developer.woo.com/wp-content/uploads/2023/12/product-editor-ext-guidelines-top-bar.png)
|
||||
|
||||
Top bar extensions offer supplementary experiences **not vital** to the critical product creation flows. They're secondary, meaning that they shouldn't contain information that may impact the product's overall quality or completeness.
|
||||
|
||||
|
@ -189,7 +189,7 @@ Depending on their roles, top bar extensions can be displayed in either a **popo
|
|||
|
||||
### Dialog extensions *(future feature)*
|
||||
|
||||
![Dialog example](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/product-editor-ext-guidelines-dialog-extensions.png)
|
||||
![Dialog example](https://developer.woo.com/wp-content/uploads/2023/12/product-editor-ext-guidelines-dialog-extensions.png)
|
||||
|
||||
Dialog extensions differ from other extensions as they are unrelated to any section or functionality within the product form. They can connect to third-party systems or come with complex interfaces that require a separate, focused experience.
|
||||
|
||||
|
|
|
@ -83,11 +83,11 @@ Therefore, a PR could have testing instructions for multiple scenarios, in fact,
|
|||
|
||||
#### Example 1
|
||||
|
||||
![Sample of good quality instructions](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/213682695-3dc51613-b836-4e7e-93ef-f75078ab48ac.png)
|
||||
![Sample of good quality instructions](https://developer.woo.com/wp-content/uploads/2023/12/213682695-3dc51613-b836-4e7e-93ef-f75078ab48ac.png)
|
||||
|
||||
#### Example 2
|
||||
|
||||
![Another sample of good quality instructions](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/213682778-b552ab07-a518-48a7-9358-16adc5762aca.png)
|
||||
![Another sample of good quality instructions](https://developer.woo.com/wp-content/uploads/2023/12/213682778-b552ab07-a518-48a7-9358-16adc5762aca.png)
|
||||
|
||||
### Improving real testing instructions
|
||||
|
||||
|
@ -95,48 +95,48 @@ In this section, you will see some real examples of testing instructions that ha
|
|||
|
||||
Before:
|
||||
|
||||
![Instructions needing improvement](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/213682262-25bec5c3-154c-45ec-aa3d-d3e07f52669e.png)
|
||||
![Instructions needing improvement](https://developer.woo.com/wp-content/uploads/sites/2/2024/01/Instructions-needing-improvement.png)
|
||||
|
||||
After:
|
||||
|
||||
![Improved instructions](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/213682303-1b12ab97-f27a-41cb-a8db-da8a78d18840.png)
|
||||
![Improved instructions](https://developer.woo.com/wp-content/uploads/2023/12/213682303-1b12ab97-f27a-41cb-a8db-da8a78d18840.png)
|
||||
|
||||
Improvements:
|
||||
|
||||
![Changes made](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/213682323-0ecc998d-69ab-4201-8daa-820b948315e8.png)
|
||||
![Changes made](https://developer.woo.com/wp-content/uploads/sites/2/2024/01/changes-made.png)
|
||||
|
||||
Before:
|
||||
|
||||
![Instructions needing improvement](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/213682396-8c52d20e-1fca-4ac1-8345-f381c15a102a.png)
|
||||
![Instructions needing improvement](https://developer.woo.com/wp-content/uploads/2023/12/213682396-8c52d20e-1fca-4ac1-8345-f381c15a102a.png)
|
||||
|
||||
After:
|
||||
|
||||
![Improved instructions](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/213682480-c01e0e84-5969-4456-8f43-70cbb8509e8d.png)
|
||||
![Improved instructions](https://developer.woo.com/wp-content/uploads/2023/12/213682480-c01e0e84-5969-4456-8f43-70cbb8509e8d.png)
|
||||
|
||||
Improvements:
|
||||
|
||||
![Changes made](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/213682597-8d06e638-35dd-4ff8-9236-63c6ec5d05b8.jpg)
|
||||
![Changes made](https://developer.woo.com/wp-content/uploads/2023/12/213682597-8d06e638-35dd-4ff8-9236-63c6ec5d05b8.jpg)
|
||||
|
||||
Before:
|
||||
|
||||
![example before providing improved instructions](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/216365611-b540a814-3b8f-40f3-ae64-81018b9f97fb.png)
|
||||
![example before providing improved instructions](https://developer.woo.com/wp-content/uploads/2023/12/216365611-b540a814-3b8f-40f3-ae64-81018b9f97fb.png)
|
||||
|
||||
After:
|
||||
|
||||
![example after providing improved instructions](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/216366043-967e5daa-6a23-4ab8-adda-5f3082d1ebf7.png)
|
||||
![example after providing improved instructions](https://developer.woo.com/wp-content/uploads/2023/12/216366043-967e5daa-6a23-4ab8-adda-5f3082d1ebf7.png)
|
||||
|
||||
Improvements:
|
||||
|
||||
![example of improvements](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/216366152-b331648d-bcef-443b-b126-de2621a20862.png)
|
||||
![example of improvements](https://developer.woo.com/wp-content/uploads/2023/12/216366152-b331648d-bcef-443b-b126-de2621a20862.png)
|
||||
|
||||
Before:
|
||||
|
||||
![example before providing improved instructions](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/216388785-8806ea74-62e6-42da-8887-c8e291e7dfe2-1.png)
|
||||
![example before providing improved instructions](https://developer.woo.com/wp-content/uploads/2023/12/216388785-8806ea74-62e6-42da-8887-c8e291e7dfe2-1.png)
|
||||
|
||||
After:
|
||||
|
||||
![example after providing improved instructions](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/216388842-e5ab433e-d288-4306-862f-72f6f81ab2cd.png)
|
||||
![example after providing improved instructions](https://developer.woo.com/wp-content/uploads/2023/12/216388842-e5ab433e-d288-4306-862f-72f6f81ab2cd.png)
|
||||
|
||||
Improvements:
|
||||
|
||||
![example of improvements](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/216388874-c5b21fc3-f693-4a7e-a58a-c5d1b6606682.png)
|
||||
![example of improvements](https://developer.woo.com/wp-content/uploads/2023/12/216388874-c5b21fc3-f693-4a7e-a58a-c5d1b6606682.png)
|
||||
|
|
|
@ -45,7 +45,7 @@ Next, set up some orders to have sample data. Using WooCommerce > Settings > Cur
|
|||
|
||||
After doing so, check out WC-Admin to make sure the orders are showing up by going to `/wp-admin/admin.php?page=wc-admin&period=today&path=%2Fanalytics%2Forders&compare=previous_year`. Note that without any modification currency figures show according to what I have currently in WooCommerce settings, which is New Zealand Dollar in this case.
|
||||
|
||||
![screenshot of wp-admin showing processing orders](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/screen-shot-2020-02-19-at-12.11.34-pm.png?w=851)
|
||||
![screenshot of wp-admin showing processing orders](https://developer.woo.com/wp-content/uploads/2023/12/screen-shot-2020-02-19-at-12.11.34-pm.png?w=851)
|
||||
|
||||
We can confirm each order's currency by running the following query on the `wp_posts` table and joining `wp_postmeta` to gather currency meta values. Results show an order in NZD, USD, and MXN. This query is similar to the one we'll implement later in the guide to gather and display currency values.
|
||||
|
||||
|
@ -62,7 +62,7 @@ ORDER BY wp_posts.post_date DESC
|
|||
LIMIT 3
|
||||
```
|
||||
|
||||
![screenshot of resulting query](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/screen-shot-2020-02-19-at-12.33.45-pm.png?w=756)
|
||||
![screenshot of resulting query](https://developer.woo.com/wp-content/uploads/2023/12/screen-shot-2020-02-19-at-12.33.45-pm.png?w=756)
|
||||
|
||||
## Add a UI dropdown
|
||||
|
||||
|
@ -99,7 +99,7 @@ add_action( 'init', 'add_currency_settings' );
|
|||
|
||||
In the console, you can confirm the data has safely made its way to the client.
|
||||
|
||||
![screnshot of console](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/screen-shot-2020-02-19-at-1.11.50-pm.png?w=476)
|
||||
![screnshot of console](https://developer.woo.com/wp-content/uploads/2023/12/screen-shot-2020-02-19-at-1.11.50-pm.png?w=476)
|
||||
|
||||
In `index.js` create the custom currency filter and add it the Orders Report.
|
||||
|
||||
|
@ -130,7 +130,7 @@ addFilter(
|
|||
|
||||
If we check out the Orders Report, we can see our new dropdown. Play around with it and you'll notice the currency query parameter gets added to the url. If you check out the Network tab, you'll also see this value included in requests for data used to populate the report. For example, see the requests to orders stats endpoint, `/wp-json/wc-analytics/reports/orders/stats`. Next we'll use that query parameter to adjust report results.
|
||||
|
||||
![screenshot showing UI dropdown in wp-admin](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/screen-shot-2020-02-19-at-1.16.44-pm.png?w=512)
|
||||
![screenshot showing UI dropdown in wp-admin](https://developer.woo.com/wp-content/uploads/2023/12/screen-shot-2020-02-19-at-1.16.44-pm.png?w=512)
|
||||
|
||||
## Handle currency parameters on the server
|
||||
|
||||
|
@ -207,7 +207,7 @@ add_filter( 'woocommerce_analytics_clauses_select_orders_stats_interval', 'add_s
|
|||
|
||||
Lets head back to the Orders Report and see if it works. You can manipulate the dropdown and see the relevant order reflected in the table.
|
||||
|
||||
![screenshot of WooCommerce Orders tab in wp-admin showing the relevant order reflected in the table.](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/screen-shot-2020-02-19-at-1.38.54-pm.png?w=585)
|
||||
![screenshot of WooCommerce Orders tab in wp-admin showing the relevant order reflected in the table.](https://developer.woo.com/wp-content/uploads/2023/12/screen-shot-2020-02-19-at-1.38.54-pm.png?w=585)
|
||||
|
||||
## Finishing touches
|
||||
|
||||
|
@ -247,15 +247,15 @@ const addTableColumn = (reportTableData) => {
|
|||
addFilter("woocommerce_admin_report_table", "dev-blog-example", addTableColumn);
|
||||
```
|
||||
|
||||
![screenshot of customized table](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/screen-shot-2020-02-19-at-4.02.15-pm.png?w=861)
|
||||
![screenshot of customized table](https://developer.woo.com/wp-content/uploads/2023/12/screen-shot-2020-02-19-at-4.02.15-pm.png?w=861)
|
||||
|
||||
While adding a column is certainly helpful, currency figures in the table and chart only reflect the store currency.
|
||||
|
||||
![screenshot of report](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/screen-shot-2020-02-19-at-4.03.42-pm.png?w=865)
|
||||
![screenshot of report](https://developer.woo.com/wp-content/uploads/2023/12/screen-shot-2020-02-19-at-4.03.42-pm.png?w=865)
|
||||
|
||||
In order to change a Report's currency and number formatting, we can make use of the `woocommerce_admin_report_currency` JS hook. You can see the store's default sent to the client in `wcSettings.currency`, but we'll need to change these depending on the currency being viewed and designated by the query parameter `?currency=NZD`.
|
||||
|
||||
![screenshot of currency settings](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/screen-shot-2020-04-03-at-11.18.42-am.png?w=238)
|
||||
![screenshot of currency settings](https://developer.woo.com/wp-content/uploads/2023/12/screen-shot-2020-04-03-at-11.18.42-am.png?w=238)
|
||||
|
||||
First, lets create some configs in index.js.
|
||||
|
||||
|
@ -299,7 +299,7 @@ addFilter(
|
|||
|
||||
🎉 We can now view our Orders Report and see the currency reflected in monetary values throughout the report.
|
||||
|
||||
![Screenshot of customized order report](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/screen-shot-2020-04-03-at-11.29.05-am.png?w=912)
|
||||
![Screenshot of customized order report](https://developer.woo.com/wp-content/uploads/2023/12/screen-shot-2020-04-03-at-11.29.05-am.png?w=912)
|
||||
|
||||
## Conclusion
|
||||
|
||||
|
|
|
@ -9,7 +9,7 @@ The REST API is a powerful part of WooCommerce which lets you read and write var
|
|||
|
||||
In order to access the REST API using the standard endpoint URI structure (e.g. `wc/v3/products`), you must have your WordPress permalinks configured to something other than "Plain". Go to **Settings > Permalinks** and choose an option.
|
||||
|
||||
![Permalinks options](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/permalinks.webp)
|
||||
![Permalinks options](https://developer.woo.com/wp-content/uploads/2023/12/permalinks.webp)
|
||||
|
||||
## API reference
|
||||
|
||||
|
@ -33,7 +33,7 @@ To start using REST API, you first need to generate API keys.
|
|||
4. Click *Generate api key*.
|
||||
5. Your keys will be shown - do not close this tab yet, the secret will be hidden if you try to view the key again.
|
||||
|
||||
![Generated API Keys](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/keys.png)
|
||||
![Generated API Keys](https://developer.woo.com/wp-content/uploads/2023/12/keys.png)
|
||||
|
||||
## Make a basic request
|
||||
|
||||
|
@ -43,11 +43,11 @@ In Postman, you need to set the fields for request type, request URL, and the se
|
|||
|
||||
Once done, hit send and you'll see the JSON response from the API if all worked well. You should see something like this:
|
||||
|
||||
![Generated API Keys](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/postman.png)
|
||||
![Generated API Keys](https://developer.woo.com/wp-content/uploads/2023/12/postman.png)
|
||||
|
||||
Insomnia is almost identical to Postman; fill in the same fields and again use basic auth.
|
||||
|
||||
![Insomnia](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/insomnia.png)
|
||||
![Insomnia](https://developer.woo.com/wp-content/uploads/2023/12/insomnia.png)
|
||||
|
||||
Thats it! The API is working.
|
||||
|
||||
|
@ -59,15 +59,15 @@ If you have problems connecting, you may need to disable SSL verification - see
|
|||
|
||||
If you're having problems connecting to the REST API on your localhost and seeing errors like this:
|
||||
|
||||
![SSL Error](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/sslerror.png)
|
||||
![SSL Error](https://developer.woo.com/wp-content/uploads/2023/12/sslerror.png)
|
||||
|
||||
You need to disable SSL verification. In Postman you can find this in the settings:
|
||||
|
||||
![Postman settings](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/postman-ssl.png)
|
||||
![Postman settings](https://developer.woo.com/wp-content/uploads/2023/12/postman-ssl.png)
|
||||
|
||||
Insomnia also has this setting the preferences area:
|
||||
|
||||
![Insomnia settings](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/insomnia-ssl.png)
|
||||
![Insomnia settings](https://developer.woo.com/wp-content/uploads/2023/12/insomnia-ssl.png)
|
||||
|
||||
### 401 Unauthorized
|
||||
|
||||
|
|
|
@ -24,7 +24,7 @@ Alternatively, you can select and use a different theme that already uses curren
|
|||
You need to determine what templates to update, make a backup of the old templates, and then restore any customizations.
|
||||
|
||||
1. Go to WooCommerce > Status > System Status. Scroll to the end of the page where there is a list of templates overridden by your theme/child theme and a warning message that they need to be updated. In the example below, the templates `form-pay.php` and `form-login.php` are outdated:
|
||||
![An example for outdated templates.](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/fix_outdated_theme_templates.png)
|
||||
![An example for outdated templates.](https://developer.woo.com/wp-content/uploads/sites/2/2024/01/fix_outdated_theme_templates.png)
|
||||
2. Save a backup of the outdated template.
|
||||
3. Copy the default template from `wp-content/plugins/woocommerce/templates/[path-to-the-template]` and paste it in your theme folder found at `wp-content/themes/[path-to-theme]`.
|
||||
4. Open the template you pasted into the theme folder with a text editor, such as Sublime, Visual Code, BBEdit, Notepad++, and replicate any changes that you had to the previous template in your new, updated template file.
|
||||
|
|
|
@ -10,9 +10,9 @@ Examples:
|
|||
- If your extension is extending a component within WooCommerce, it should live within either the Extensions navigation drawer (in Woo Express stores), or directly within that category's section.
|
||||
|
||||
Extensions drawer (Woo Express)
|
||||
![Navigation extensions drawer](https://woo-docs-multi-com.go-vip.net/docs/wp-content/uploads/sites/3/2024/01/Image-1224x572-1.png)
|
||||
![Navigation extensions drawer](https://developer.woo.com/docs/wp-content/uploads/sites/3/2024/01/Image-1224x572-1.png)
|
||||
|
||||
![Navigation category](https://woo-docs-multi-com.go-vip.net/docs/wp-content/uploads/sites/3/2024/01/Image-1242x764-1.png)
|
||||
![Navigation category](https://developer.woo.com/docs/wp-content/uploads/sites/3/2024/01/Image-1242x764-1.png)
|
||||
|
||||
- If your plugin adds a settings screen to set up the plugin, settings should be under an appropriate tab on the WooCommerce > Settings screen. Only if necessary, create a top-level settings tab if your plugin has settings that don't fit under existing tabs and creating a sub-tab isn't appropriate.
|
||||
|
||||
|
|
|
@ -19,7 +19,7 @@ Use short but meaningful messages that communicate what is happening. Ensure tha
|
|||
|
||||
The placement of feedback is vital so the user notices it. For example, when validation messages are needed to prompt the user to enter data, get the user's attention by displaying a message close to the inputs where data needs to be revised.
|
||||
|
||||
![visualization of four different notice designs next to one another](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/notices1.png)
|
||||
![visualization of four different notice designs next to one another](https://developer.woo.com/wp-content/uploads/2023/12/notices1.png)
|
||||
|
||||
**Success** message: When the user performs an action that is executed successfully.
|
||||
|
||||
|
@ -31,4 +31,4 @@ The placement of feedback is vital so the user notices it. For example, when val
|
|||
|
||||
### Examples
|
||||
|
||||
![an example of an informational message as a notice](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/informational-notice.png)
|
||||
![an example of an informational message as a notice](https://developer.woo.com/wp-content/uploads/2023/12/informational-notice.png)
|
||||
|
|
|
@ -9,7 +9,7 @@ Use the Task List and Inbox sparingly. Messages should be clear, concise, and ma
|
|||
|
||||
## Task List
|
||||
|
||||
![an example of a task in the task list](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/task-list1.png)
|
||||
![an example of a task in the task list](https://developer.woo.com/wp-content/uploads/2023/12/task-list1.png)
|
||||
|
||||
Anything that **requires** action should go in the task list.
|
||||
|
||||
|
@ -26,13 +26,13 @@ Anything that **requires** action should go in the task list.
|
|||
|
||||
Examples:
|
||||
|
||||
![three tasks in the task list under the heading "Things to do next" with the option to expand at the bottom to "show 3 more tasks" ](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/task-list-example.png)
|
||||
![three tasks in the task list under the heading "Things to do next" with the option to expand at the bottom to "show 3 more tasks" ](https://developer.woo.com/wp-content/uploads/2023/12/task-list-example.png)
|
||||
|
||||
## Inbox
|
||||
|
||||
The Inbox provides informational, useful, and supplemental content to the user, while important notices and setup tasks have their separate and relevant locations.
|
||||
|
||||
![an example of an inbox notification](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/inbox1.png)
|
||||
![an example of an inbox notification](https://developer.woo.com/wp-content/uploads/2023/12/inbox1.png)
|
||||
|
||||
- *What appears in the Inbox*:
|
||||
- Informational notices such as non-critical reminders.
|
||||
|
@ -46,4 +46,4 @@ The Inbox provides informational, useful, and supplemental content to the user,
|
|||
|
||||
Examples:
|
||||
|
||||
![an example of two inbox notifications listed under the "Inbox" section of the admin](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/inbox-examples.png)
|
||||
![an example of two inbox notifications listed under the "Inbox" section of the admin](https://developer.woo.com/wp-content/uploads/2023/12/inbox-examples.png)
|
||||
|
|
|
@ -9,28 +9,28 @@ Define the position and alignment of buttons in relationship to their container,
|
|||
|
||||
Position payment buttons correctly in relation to “Add to Cart” in horizontal or vertical layout, place payment buttons to the right of or below the “Add to Cart” button.
|
||||
|
||||
![Product page layout.png](https://woo-docs-multi-com.go-vip.net/docs/wp-content/uploads/sites/3/2024/01/Product-page-layout.png)
|
||||
![Product page layout.png](https://developer.woo.com/docs/wp-content/uploads/sites/3/2024/01/Product-page-layout.png)
|
||||
|
||||
### Cart
|
||||
|
||||
Position payment buttons correctly in relation to “Proceed to checkout” buttons in vertical layout. Place payment buttons above the “Proceed to checkout” button. Do not place payment buttons below the button or in between.
|
||||
|
||||
![Cart layout.png](https://woo-docs-multi-com.go-vip.net/docs/wp-content/uploads/sites/3/2024/01/Cart-layout.png)
|
||||
![Cart layout.png](https://developer.woo.com/docs/wp-content/uploads/sites/3/2024/01/Cart-layout.png)
|
||||
|
||||
### Express checkout
|
||||
|
||||
Position payment buttons correctly in horizontal layout, consistent in size and spacing. If a second row is required, left-align the buttons.
|
||||
|
||||
![Express checkout layout.png](https://woo-docs-multi-com.go-vip.net/docs/wp-content/uploads/sites/3/2024/01/Express-checkout-layout.png)
|
||||
![Express checkout layout.png](https://developer.woo.com/docs/wp-content/uploads/sites/3/2024/01/Express-checkout-layout.png)
|
||||
|
||||
### Mobile view
|
||||
|
||||
Express payment buttons on mobile should occupy the full width. Don’t use the express payment border as it reduces the view area.
|
||||
|
||||
![Mobile view.png](https://woo-docs-multi-com.go-vip.net/docs/wp-content/uploads/sites/3/2024/01/Mobile-view.png)
|
||||
![Mobile view.png](https://developer.woo.com/docs/wp-content/uploads/sites/3/2024/01/Mobile-view.png)
|
||||
|
||||
### Clear space
|
||||
|
||||
Maintain the minimum amount of clear space on all sides of the payment button. The clear space adapts based on the size of the button.
|
||||
|
||||
![Clear space.png](https://woo-docs-multi-com.go-vip.net/docs/wp-content/uploads/sites/3/2024/01/Clear-space.png)
|
||||
![Clear space.png](https://developer.woo.com/docs/wp-content/uploads/sites/3/2024/01/Clear-space.png)
|
||||
|
|
|
@ -18,41 +18,41 @@ Payment buttons consist of up to three elements: a button component, payment log
|
|||
|
||||
Don’t place any text outside the surface area of the button.
|
||||
|
||||
![Cart layout 2](https://woo-docs-multi-com.go-vip.net/docs/wp-content/uploads/sites/3/2024/01/Cart-layout-2.png)
|
||||
![Cart layout 2](https://developer.woo.com/docs/wp-content/uploads/sites/3/2024/01/Cart-layout-2.png)
|
||||
|
||||
### Layout and spacing
|
||||
|
||||
The spacing between and around the Label and Payment Logo adapts based on the size of the button.
|
||||
|
||||
![Layout and spacing 0.png](https://woo-docs-multi-com.go-vip.net/docs/wp-content/uploads/sites/3/2024/01/Layout-and-spacing-0.png)
|
||||
![Layout and spacing 0.png](https://developer.woo.com/docs/wp-content/uploads/sites/3/2024/01/Layout-and-spacing-0.png)
|
||||
|
||||
### Adaptive height
|
||||
|
||||
The height of the button can adapt based on the needs of the theme.
|
||||
|
||||
![Layout and spacing.png](https://woo-docs-multi-com.go-vip.net/docs/wp-content/uploads/sites/3/2024/01/Layout-and-spacing.png)
|
||||
![Layout and spacing.png](https://developer.woo.com/docs/wp-content/uploads/sites/3/2024/01/Layout-and-spacing.png)
|
||||
|
||||
### Button size
|
||||
|
||||
Make payment buttons the same size, no bigger or smaller than other payment buttons, including the CTAs “Add to cart” and “Proceed to checkout”
|
||||
|
||||
![Same button size.png](https://woo-docs-multi-com.go-vip.net/docs/wp-content/uploads/sites/3/2024/01/Same-button-size.png)
|
||||
![Same button size.png](https://developer.woo.com/docs/wp-content/uploads/sites/3/2024/01/Same-button-size.png)
|
||||
|
||||
### Button width
|
||||
|
||||
Use the same width size for all payment buttons. Don’t make the width larger or smaller than other payment buttons.
|
||||
|
||||
![button width.png](https://woo-docs-multi-com.go-vip.net/docs/wp-content/uploads/sites/3/2024/01/Button-width.png)
|
||||
![button width.png](https://developer.woo.com/docs/wp-content/uploads/sites/3/2024/01/Button-width.png)
|
||||
|
||||
### Minimum width
|
||||
|
||||
Buttons have a minimum width to ensure readability.
|
||||
|
||||
![Layout and spacing-2.png](https://woo-docs-multi-com.go-vip.net/docs/wp-content/uploads/sites/3/2024/01/Layout-and-spacing-2.png)
|
||||
![Layout and spacing-2.png](https://developer.woo.com/docs/wp-content/uploads/sites/3/2024/01/Layout-and-spacing-2.png)
|
||||
|
||||
Follow the minimum width of each payment button size. Don’t squeeze payment buttons in a single line.
|
||||
|
||||
![Minimum width.png](https://woo-docs-multi-com.go-vip.net/docs/wp-content/uploads/sites/3/2024/01/Minimum-width.png)
|
||||
![Minimum width.png](https://developer.woo.com/docs/wp-content/uploads/sites/3/2024/01/Minimum-width.png)
|
||||
|
||||
### Button Shape
|
||||
|
||||
|
@ -61,7 +61,7 @@ Use the same corner radius for all payment buttons. Don’t make the corner radi
|
|||
- Default corner radius: 4px
|
||||
- Maximum corner radius: ½ button height
|
||||
|
||||
![Corner radius.png](https://woo-docs-multi-com.go-vip.net/docs/wp-content/uploads/sites/3/2024/01/Corner-radius.png)
|
||||
![Corner radius.png](https://developer.woo.com/docs/wp-content/uploads/sites/3/2024/01/Corner-radius.png)
|
||||
|
||||
### Button Label
|
||||
|
||||
|
@ -78,4 +78,4 @@ Icon only
|
|||
|
||||
The button label should appear in sentence case, with only the first letter of the first word capitalized.
|
||||
|
||||
![Button labels.png](https://woo-docs-multi-com.go-vip.net/docs/wp-content/uploads/sites/3/2024/01/Button-Labels.png)
|
||||
![Button labels.png](https://developer.woo.com/docs/wp-content/uploads/sites/3/2024/01/Button-Labels.png)
|
||||
|
|
|
@ -5,28 +5,28 @@ menu_title: Payment Button Style
|
|||
|
||||
Use the appropriate button style depending on the site theme.
|
||||
|
||||
![Button styles.png](https://woo-docs-multi-com.go-vip.net/docs/wp-content/uploads/sites/3/2024/01/Button-styles.png)
|
||||
![Button styles.png](https://developer.woo.com/docs/wp-content/uploads/sites/3/2024/01/Button-styles.png)
|
||||
|
||||
### Dark
|
||||
|
||||
Use on white or light-color backgrounds. Don’t use on black or dark backgrounds.
|
||||
|
||||
![Dark.png](https://woo-docs-multi-com.go-vip.net/docs/wp-content/uploads/sites/3/2024/01/Dark.png)
|
||||
![Dark.png](https://developer.woo.com/docs/wp-content/uploads/sites/3/2024/01/Dark.png)
|
||||
|
||||
### Light
|
||||
|
||||
Use on dark-color backgrounds. Don’t use on white or light backgrounds.
|
||||
|
||||
![Light.png](https://woo-docs-multi-com.go-vip.net/docs/wp-content/uploads/sites/3/2024/01/Light.png)
|
||||
![Light.png](https://developer.woo.com/docs/wp-content/uploads/sites/3/2024/01/Light.png)
|
||||
|
||||
### Light with outline
|
||||
|
||||
Use on white or light-color backgrounds that don’t provide sufficient contrast. Don’t use on dark or saturated backgrounds.
|
||||
|
||||
![Light with outline.png](https://woo-docs-multi-com.go-vip.net/docs/wp-content/uploads/sites/3/2024/01/Light-with-outline.png)
|
||||
![Light with outline.png](https://developer.woo.com/docs/wp-content/uploads/sites/3/2024/01/Light-with-outline.png)
|
||||
|
||||
### Button style and specifications
|
||||
|
||||
Buttons should contain the following states for resting, loading, active, and loading contexts. For additional guidance, follow the general Woo accessibility guidelines.
|
||||
|
||||
![Button States and specifications](https://woo-docs-multi-com.go-vip.net/docs/wp-content/uploads/sites/3/2024/01/Button-States-and-specifications.png)
|
||||
![Button States and specifications](https://developer.woo.com/docs/wp-content/uploads/sites/3/2024/01/Button-States-and-specifications.png)
|
||||
|
|
|
@ -32,10 +32,10 @@ After the merchant has completed all the actions that are required for your plug
|
|||
|
||||
If you're offering multiple payment methods within the plugin, present the choices clearly to the merchant and provide an indication of which payment methods are enabled.
|
||||
|
||||
![Payment methods](https://woo-docs-multi-com.go-vip.net/docs/wp-content/uploads/sites/3/2024/01/Payment-methods.png)
|
||||
![Payment methods](https://developer.woo.com/docs/wp-content/uploads/sites/3/2024/01/Payment-methods.png)
|
||||
|
||||
If a payment method is not available for any reason, provide clear and informative error messages that help users diagnose and resolve issues.
|
||||
|
||||
Your plugin needs to inform the merchant that it's ready to process payments. Until then, display an inline warning notice in the plugin settings as a reminder to the merchant. Do not implement a top level banner for the warning notice.
|
||||
|
||||
![Inline notice](https://woo-docs-multi-com.go-vip.net/docs/wp-content/uploads/sites/3/2024/01/Inline-Notice.png)
|
||||
![Inline notice](https://developer.woo.com/docs/wp-content/uploads/sites/3/2024/01/Inline-Notice.png)
|
||||
|
|
|
@ -7,7 +7,7 @@ Dialog extensions differ from other extensions as they are unrelated to any sect
|
|||
|
||||
Dialogs can have different sizes (small, medium, large, or custom) and trigger locations (text or icon button anywhere in the form or in the form's top bar).
|
||||
|
||||
![Dialog example](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/product-editor-ext-guidelines-dialog-extensions.png)
|
||||
![Dialog example](https://developer.woo.com/wp-content/uploads/2023/12/product-editor-ext-guidelines-dialog-extensions.png)
|
||||
|
||||
## What they are for
|
||||
|
||||
|
|
|
@ -5,7 +5,7 @@ menu_title: Fields
|
|||
|
||||
Fields are the simplest type of extension. They let users add extra product information, replace or manage the visibility of other fields assigned to a specific product type, and control the contents of other fields.
|
||||
|
||||
![Fields example](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/product-editor-ext-guidelines-fields.png)
|
||||
![Fields example](https://developer.woo.com/wp-content/uploads/2023/12/product-editor-ext-guidelines-fields.png)
|
||||
|
||||
## What they are for
|
||||
|
||||
|
|
|
@ -5,7 +5,7 @@ menu_title: Groups
|
|||
|
||||
The new product form consists of groups currently displayed as tabs. Each is a separate view and may contain any number of sections and subsections. All areas serve a specific purpose, allowing merchants to quickly find the information they're looking for (both in default Woo features and extensions).
|
||||
|
||||
![Product form groups](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/product-editor-ext-guidelines-form-groups.gif)
|
||||
![Product form groups](https://developer.woo.com/wp-content/uploads/2023/12/product-editor-ext-guidelines-form-groups.gif)
|
||||
|
||||
If a tab doesn't contain any sections, it won't be shown to merchants.
|
||||
|
||||
|
|
|
@ -5,7 +5,7 @@ menu_title: Sections
|
|||
|
||||
Sections are significant parts of the form that may consist of multiple subsections and fields. They should be used sparsely throughout the form, so merchants are not overwhelmed with options while filling out the information about their products.
|
||||
|
||||
![Sections example](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/product-editor-ext-guidelines-sections.png)
|
||||
![Sections example](https://developer.woo.com/wp-content/uploads/2023/12/product-editor-ext-guidelines-sections.png)
|
||||
|
||||
## What they are for
|
||||
|
||||
|
|
|
@ -5,7 +5,7 @@ menu_title: Subsections
|
|||
|
||||
Subsections add extra fields to existing form groups. They are small forms with a low to medium level of complexity. This interface location works best for extensions that add extra features that build off an existing Woo functionality.
|
||||
|
||||
![Subsections example](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/product-editor-ext-guidelines-subsections.png)
|
||||
![Subsections example](https://developer.woo.com/wp-content/uploads/2023/12/product-editor-ext-guidelines-subsections.png)
|
||||
|
||||
|
||||
## What they are for
|
||||
|
|
|
@ -7,7 +7,7 @@ Top bar extensions offer supplementary experiences **not vital** to the critical
|
|||
|
||||
Each top bar extension has its unique icon in the top navigation bar. Note that when the number of extensions exceeds 4, they're truncated in a dropdown menu.
|
||||
|
||||
![Top bar example](https://woo-docs-multi-com.go-vip.net/wp-content/uploads/2023/12/product-editor-ext-guidelines-top-bar.png)
|
||||
![Top bar example](https://developer.woo.com/wp-content/uploads/2023/12/product-editor-ext-guidelines-top-bar.png)
|
||||
|
||||
For example, top bar extensions can be used to:
|
||||
|
||||
|
|
Loading…
Reference in New Issue