How to reorder custom tab in woocommerce my account page? - php

I created a custom tab (My Favorites) for my Woocommerce my account page and placed the below code in my child theme's functions.php file. When I did that, the custom tab is ordered at the bottom of the rest of the tabs.
So I was wondering, is a way to reorder it further up the list of tabs?
Specifically I would like to reorder my custom tab (My Favorites) above the "Account Details" tab.
image link
function add_myfavorites_endpoint() {
add_rewrite_endpoint( 'myfavorites', EP_ROOT | EP_PAGES );
}
add_action( 'init', 'add_myfavorites_endpoint' );
function myfavorites_query_vars( $vars ) {
$vars[] = 'myfavorites';
return $vars;
}
add_filter( 'query_vars', 'myfavorites_query_vars', 0 );
function add_myfavorites_link_my_account( $items ) {
$items['myfavorites'] = 'My Favorites';
return $items;
}
add_filter( 'woocommerce_account_menu_items', 'add_myfavorites_link_my_account' );
function myfavorites_content() {
echo '<h3>My Favorites</h3><p>';
echo do_shortcode( ' [my_content_shortcode] ' );
}
add_action( 'woocommerce_account_myfavorites_endpoint', 'myfavorites_content' );

// Rename, re-order my account menu items
function fwuk_reorder_my_account_menu() {
$neworder = array(
'dashboard' => __( 'Dashboard', 'woocommerce' ),
'orders' => __( 'Previous Orders', 'woocommerce' ),
'wishlist-link' => __( 'Wishlist', 'woocommerce' ),
'edit-address' => __( 'Addresses', 'woocommerce' ),
'edit-account' => __( 'Account Details', 'woocommerce' ),
'customer-logout' => __( 'Logout', 'woocommerce' ),
);
return $neworder;
}
add_filter ( 'woocommerce_account_menu_items', 'fwuk_reorder_my_account_menu' );

Related

Adding Custom Tabs to My Account Page in WooCommerce [duplicate]

This function adds a tab named "Special Page" into "My Account" tab list:
add_filter( 'woocommerce_account_menu_items' , 'jc_menu_panel_nav' );
function jc_menu_panel_nav() {
$items = array(
'dashboard' => __( 'Dashboard', 'woocommerce' ),
'orders' => __( 'Orders', 'woocommerce' ),
'downloads' => __( 'Downloads', 'woocommerce' ),
'edit-address' => __( 'Addresses', 'woocommerce' ),
'payment-methods' => __( 'Payment Methods', 'woocommerce' ),
'edit-account' => __( 'Account Details', 'woocommerce' ),
'special-page' => __( 'Special Page', 'woocommerce' ), // My custom tab here
'customer-logout' => __( 'Logout', 'woocommerce' ),
);
return $items;
}
That results in this:
But the link points to my-account/special-page/, and naturally gives a 404 error.
How I can assign this URL to a file named special-page.php?
Finally I could solve the problem using a snippet provided for the same people of WooCommerce (There are more tips in that page). For anyone interested, paste all the following code in functions.php:
function my_custom_endpoints() {
add_rewrite_endpoint( 'special-page', EP_ROOT | EP_PAGES );
}
add_action( 'init', 'my_custom_endpoints' );
function my_custom_query_vars( $vars ) {
$vars[] = 'special-page';
return $vars;
}
add_filter( 'query_vars', 'my_custom_query_vars', 0 );
function my_custom_flush_rewrite_rules() {
flush_rewrite_rules();
}
add_action( 'wp_loaded', 'my_custom_flush_rewrite_rules' );
I think this way allows more control to order/renaming the menu:
function my_custom_my_account_menu_items( $items ) {
$items = array(
'dashboard' => __( 'Dashboard', 'woocommerce' ),
'orders' => __( 'Orders', 'woocommerce' ),
//'downloads' => __( 'Downloads', 'woocommerce' ),
//'edit-address' => __( 'Addresses', 'woocommerce' ),
//'payment-methods' => __( 'Payment Methods', 'woocommerce' ),
'edit-account' => __( 'Edit Account', 'woocommerce' ),
'special-page' => 'Special Page',
'customer-logout' => __( 'Logout', 'woocommerce' ),
);
return $items;
}
add_filter( 'woocommerce_account_menu_items', 'my_custom_my_account_menu_items' );
In the following function I included the file to maintain some "order", but it also admits direct code.
Be sure to place the special-page.php file in the myaccount folder.
function my_custom_endpoint_content() {
include 'woocommerce/myaccount/special-page.php';
}
add_action( 'woocommerce_account_special-page_endpoint', 'my_custom_endpoint_content' );
Important: Once did this, go to Dashboard > Settings > Permalinks and click "Save Settings" in order to flush rewrite rules (thanks #optimiertes)
Source: Tabbed My Account page
First my-account/special-page/ should be myaccount/special-page/ in woocommerce 2.6+.
This solution is Incomplete and I am still working On…
You can use first this hook:
add_action( 'init', 'add_wc_endpoint' );
function add_wc_endpoint(){
add_rewrite_endpoint( 'special-page', EP_ROOT | EP_PAGES );
}
Then filtering wc_get_templateto call your files when the request match your endpoint:
add_filter( 'wc_get_template', 'custom_vc_endpoint', 10, 5 );
function custom_vc_endpoint($located, $template_name, $args, $template_path, $default_path){
if( $template_name == 'myaccount/special-page.php' ){
global $wp_query;
if(isset($wp_query->query['special-page'])){
$located = get_template_directory() . '/woocommerce/myaccount/special-page.php';
}
}
return $located;
}
If you use a child theme, replace get_template_directory() by get_stylesheet_directory()… Paste this code in function.php file of your active child theme or theme.
To avoid a 404 error "page not found", you will need to refresh rewrite rules adding to your code:
flush_rewrite_rules();
Update: Finally Dario (the OP) found a working solution. Look at his answer.
References:
Tabbed My Account page (Official Woocommerce 2.6+): Creating new endpoints
How to add a new endpoint in woocommerce (old and incomplete)
There is a better way to use a template in your custom page in woocommerce:
function my_custom_endpoint_content() {
wc_get_template( 'myaccount/special-page.php' );
}
add_action( 'woocommerce_account_special-page_endpoint', 'my_custom_endpoint_content' );
this should work without using the wc_get_template filter.
You can add this code to your theme's function.php:
class My_Custom_My_Account_Endpoint {
/**
* Custom endpoint name.
*
* #var string
*/
public static $endpoint = 'special-page';
/**
* Plugin actions.
*/
public function __construct() {
// Actions used to insert a new endpoint in the WordPress.
add_action( 'init', array( $this, 'add_endpoints' ) );
add_filter( 'query_vars', array( $this, 'add_query_vars' ), 0 );
// Change the My Accout page title.
add_filter( 'the_title', array( $this, 'endpoint_title' ) );
// Insering your new tab/page into the My Account page.
add_filter( 'woocommerce_account_menu_items', array( $this, 'new_menu_items' ) );
add_action( 'woocommerce_account_' . self::$endpoint . '_endpoint', array( $this, 'endpoint_content' ) );
}
/**
* Register new endpoint to use inside My Account page.
*
* #see https://developer.wordpress.org/reference/functions/add_rewrite_endpoint/
*/
public function add_endpoints() {
add_rewrite_endpoint( self::$endpoint, EP_ROOT | EP_PAGES );
}
/**
* Add new query var.
*
* #param array $vars
* #return array
*/
public function add_query_vars( $vars ) {
$vars[] = self::$endpoint;
return $vars;
}
/**
* Set endpoint title.
*
* #param string $title
* #return string
*/
public function endpoint_title( $title ) {
global $wp_query;
$is_endpoint = isset( $wp_query->query_vars[ self::$endpoint ] );
if ( $is_endpoint && ! is_admin() && is_main_query() && in_the_loop() && is_account_page() ) {
// New page title.
$title = __( 'Special Page', 'woocommerce' );
remove_filter( 'the_title', array( $this, 'endpoint_title' ) );
}
return $title;
}
/**
* Insert the new endpoint into the My Account menu.
*
* #param array $items
* #return array
*/
public function new_menu_items( $items ) {
// Remove the logout menu item.
$logout = $items['customer-logout'];
unset( $items['customer-logout'] );
// Insert your custom endpoint.
$items[ self::$endpoint ] = __( 'Special Page', 'woocommerce' );
// Insert back the logout item.
$items['customer-logout'] = $logout;
return $items;
}
/**
* Endpoint HTML content.
*/
public function endpoint_content() {
include('woocommerce/myaccount/special-page.php');
}
/**
* Plugin install action.
* Flush rewrite rules to make our custom endpoint available.
*/
public static function install() {
flush_rewrite_rules();
}
}
new My_Custom_My_Account_Endpoint();
// Flush rewrite rules on plugin activation.
register_activation_hook( __FILE__, array( 'My_Custom_My_Account_Endpoint', 'install' ) );
If you don't know where is your theme's function.php:
1.Log in to the WordPress Admin interface
2.In the left sidebar, hover over Appearances, then click Theme Editor
3.In the right sidebar, click functions.php

adding custom field to woo product page (only for certain product id)

I need to add custom tab on product page, but i want it show it only for some product ids.
Here my code for adding the custom tab on front end.
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
$tabs['desc_tab'] = array(
'title' => __( 'Additional Information', 'woocommerce' ),
'priority' => 50,
'callback' => 'woo_new_product_tab_content'
);
return $tabs;
}
and then i should add below function too for displaying the content.
function woo_new_product_tab_content() {
echo '<p>some text</p>';
}
but now these function work for all product ids. I want to load this two function only for some product id, could someone help me?
I tired to add if(is_product() && get_the_id() == 8) on both functions but $tabs not appear on others product ids page , ( on product id "8" $tabs worked well )
the problem of that code wast about to forget return $tabs
if(is_product()) {
//if(is_product())) {
return $tabs;
}
return $tabs;
}
so the final code could be like this.
function woo_new_product_tab( $tabs ) {
if(condition) {
$tabs['desc_tab'] = array(
'title' => __( 'Additional Information', 'woocommerce' ),
'priority' => 50,
'callback' => 'woo_new_product_tab_content'
);
return $tabs;
}
return $tabs;
}

Woocommerce custom Endpoint content url

i added a custom endpoint to myaccount menu and it corrispond to the Yith Woccommerce Wishlist.
I added this code in order to create the edpoint and show the content:
function my_custom_endpoints() {
add_rewrite_endpoint( 'yith-my-wishlist', EP_ROOT | EP_PAGES );
}
add_action( 'init', 'my_custom_endpoints' );
function my_custom_query_vars( $vars ) {
$vars[] = 'yith-my-wishlist';
return $vars;
}
add_filter( 'query_vars', 'my_custom_query_vars', 0 );
function my_flush_rewrite_rules() {
flush_rewrite_rules();
}
add_action( 'wp_loaded', 'my_flush_rewrite_rules' );
function my_custom_my_account_menu_items( $items ) {
$items = array(
'customer-logout' => __( 'Logout', 'woocommerce' ),
'edit-account' => __( 'My Profile', 'woocommerce' ),
'yith-my-wishlist' => __('My Wishlist', 'woocommerce'),
//'dashboard' => __( 'Dashboard', 'woocommerce' ),
'orders' => __( 'Orders', 'woocommerce' )
//'downloads' => __( 'Downloads', 'woocommerce' ),
//'edit-address' => __( 'Addresses', 'woocommerce' ),
//'payment-methods' => __( 'Payment Methods', 'woocommerce' ),
);
return $items;
}
add_filter( 'woocommerce_account_menu_items', 'my_custom_my_account_menu_items' );
function my_custom_endpoint_content() {
include 'yith-woocommerce-wishlist/wishlist-view.php';
}
add_action( 'woocommerce_account_special-page_endpoint', 'my_custom_endpoint_content' );
But the content doesn't appear. I think I got wrong on the url in the my_custom_endpoint_content() function.
I have a child theme and this code is in the functions.php of the child theme. I copied the folder of the yith plugin in the childtheme folder with the file i want to show.
How can i fix it ?
your
add_action( 'woocommerce_account_special-page_endpoint', 'my_custom_endpoint_content' );
should have been
add_action( 'woocommerce_account_yith-my-wishlist_endpoint', 'my_custom_endpoint_content' );
it is in this format 'woocommerce_account_' . $key . '_endpoint' where the $key in your case is yith-my-wishlist.
Also, I think include 'yith-woocommerce-wishlist/wishlist-view.php'; will not work on the functions.php. You need the path to the plugin if this file is from a plugin.

Add Custom Endpoint URL to WooCommerce [duplicate]

This function adds a tab named "Special Page" into "My Account" tab list:
add_filter( 'woocommerce_account_menu_items' , 'jc_menu_panel_nav' );
function jc_menu_panel_nav() {
$items = array(
'dashboard' => __( 'Dashboard', 'woocommerce' ),
'orders' => __( 'Orders', 'woocommerce' ),
'downloads' => __( 'Downloads', 'woocommerce' ),
'edit-address' => __( 'Addresses', 'woocommerce' ),
'payment-methods' => __( 'Payment Methods', 'woocommerce' ),
'edit-account' => __( 'Account Details', 'woocommerce' ),
'special-page' => __( 'Special Page', 'woocommerce' ), // My custom tab here
'customer-logout' => __( 'Logout', 'woocommerce' ),
);
return $items;
}
That results in this:
But the link points to my-account/special-page/, and naturally gives a 404 error.
How I can assign this URL to a file named special-page.php?
Finally I could solve the problem using a snippet provided for the same people of WooCommerce (There are more tips in that page). For anyone interested, paste all the following code in functions.php:
function my_custom_endpoints() {
add_rewrite_endpoint( 'special-page', EP_ROOT | EP_PAGES );
}
add_action( 'init', 'my_custom_endpoints' );
function my_custom_query_vars( $vars ) {
$vars[] = 'special-page';
return $vars;
}
add_filter( 'query_vars', 'my_custom_query_vars', 0 );
function my_custom_flush_rewrite_rules() {
flush_rewrite_rules();
}
add_action( 'wp_loaded', 'my_custom_flush_rewrite_rules' );
I think this way allows more control to order/renaming the menu:
function my_custom_my_account_menu_items( $items ) {
$items = array(
'dashboard' => __( 'Dashboard', 'woocommerce' ),
'orders' => __( 'Orders', 'woocommerce' ),
//'downloads' => __( 'Downloads', 'woocommerce' ),
//'edit-address' => __( 'Addresses', 'woocommerce' ),
//'payment-methods' => __( 'Payment Methods', 'woocommerce' ),
'edit-account' => __( 'Edit Account', 'woocommerce' ),
'special-page' => 'Special Page',
'customer-logout' => __( 'Logout', 'woocommerce' ),
);
return $items;
}
add_filter( 'woocommerce_account_menu_items', 'my_custom_my_account_menu_items' );
In the following function I included the file to maintain some "order", but it also admits direct code.
Be sure to place the special-page.php file in the myaccount folder.
function my_custom_endpoint_content() {
include 'woocommerce/myaccount/special-page.php';
}
add_action( 'woocommerce_account_special-page_endpoint', 'my_custom_endpoint_content' );
Important: Once did this, go to Dashboard > Settings > Permalinks and click "Save Settings" in order to flush rewrite rules (thanks #optimiertes)
Source: Tabbed My Account page
First my-account/special-page/ should be myaccount/special-page/ in woocommerce 2.6+.
This solution is Incomplete and I am still working On…
You can use first this hook:
add_action( 'init', 'add_wc_endpoint' );
function add_wc_endpoint(){
add_rewrite_endpoint( 'special-page', EP_ROOT | EP_PAGES );
}
Then filtering wc_get_templateto call your files when the request match your endpoint:
add_filter( 'wc_get_template', 'custom_vc_endpoint', 10, 5 );
function custom_vc_endpoint($located, $template_name, $args, $template_path, $default_path){
if( $template_name == 'myaccount/special-page.php' ){
global $wp_query;
if(isset($wp_query->query['special-page'])){
$located = get_template_directory() . '/woocommerce/myaccount/special-page.php';
}
}
return $located;
}
If you use a child theme, replace get_template_directory() by get_stylesheet_directory()… Paste this code in function.php file of your active child theme or theme.
To avoid a 404 error "page not found", you will need to refresh rewrite rules adding to your code:
flush_rewrite_rules();
Update: Finally Dario (the OP) found a working solution. Look at his answer.
References:
Tabbed My Account page (Official Woocommerce 2.6+): Creating new endpoints
How to add a new endpoint in woocommerce (old and incomplete)
There is a better way to use a template in your custom page in woocommerce:
function my_custom_endpoint_content() {
wc_get_template( 'myaccount/special-page.php' );
}
add_action( 'woocommerce_account_special-page_endpoint', 'my_custom_endpoint_content' );
this should work without using the wc_get_template filter.
You can add this code to your theme's function.php:
class My_Custom_My_Account_Endpoint {
/**
* Custom endpoint name.
*
* #var string
*/
public static $endpoint = 'special-page';
/**
* Plugin actions.
*/
public function __construct() {
// Actions used to insert a new endpoint in the WordPress.
add_action( 'init', array( $this, 'add_endpoints' ) );
add_filter( 'query_vars', array( $this, 'add_query_vars' ), 0 );
// Change the My Accout page title.
add_filter( 'the_title', array( $this, 'endpoint_title' ) );
// Insering your new tab/page into the My Account page.
add_filter( 'woocommerce_account_menu_items', array( $this, 'new_menu_items' ) );
add_action( 'woocommerce_account_' . self::$endpoint . '_endpoint', array( $this, 'endpoint_content' ) );
}
/**
* Register new endpoint to use inside My Account page.
*
* #see https://developer.wordpress.org/reference/functions/add_rewrite_endpoint/
*/
public function add_endpoints() {
add_rewrite_endpoint( self::$endpoint, EP_ROOT | EP_PAGES );
}
/**
* Add new query var.
*
* #param array $vars
* #return array
*/
public function add_query_vars( $vars ) {
$vars[] = self::$endpoint;
return $vars;
}
/**
* Set endpoint title.
*
* #param string $title
* #return string
*/
public function endpoint_title( $title ) {
global $wp_query;
$is_endpoint = isset( $wp_query->query_vars[ self::$endpoint ] );
if ( $is_endpoint && ! is_admin() && is_main_query() && in_the_loop() && is_account_page() ) {
// New page title.
$title = __( 'Special Page', 'woocommerce' );
remove_filter( 'the_title', array( $this, 'endpoint_title' ) );
}
return $title;
}
/**
* Insert the new endpoint into the My Account menu.
*
* #param array $items
* #return array
*/
public function new_menu_items( $items ) {
// Remove the logout menu item.
$logout = $items['customer-logout'];
unset( $items['customer-logout'] );
// Insert your custom endpoint.
$items[ self::$endpoint ] = __( 'Special Page', 'woocommerce' );
// Insert back the logout item.
$items['customer-logout'] = $logout;
return $items;
}
/**
* Endpoint HTML content.
*/
public function endpoint_content() {
include('woocommerce/myaccount/special-page.php');
}
/**
* Plugin install action.
* Flush rewrite rules to make our custom endpoint available.
*/
public static function install() {
flush_rewrite_rules();
}
}
new My_Custom_My_Account_Endpoint();
// Flush rewrite rules on plugin activation.
register_activation_hook( __FILE__, array( 'My_Custom_My_Account_Endpoint', 'install' ) );
If you don't know where is your theme's function.php:
1.Log in to the WordPress Admin interface
2.In the left sidebar, hover over Appearances, then click Theme Editor
3.In the right sidebar, click functions.php

Add custom HTML in New Tab on Product Page - WooCommerce

I am trying to Add a new tab on single product page. My below codes works well:-
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
// Adds the new tab
$tabs['desc_tab'] = array(
'title' => __( 'Additional Information', 'woocommerce' ),
'priority' => 50,
'callback' => 'woo_new_product_tab_content'
);
}
I want to insert some html data in the 'title' =>
For example:
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
// Adds the new tab
$tabs['desc_tab'] = array(
'title' => __( 'Additional Information <img src="'.$image.'"/>', 'woocommerce' ),
'priority' => 50,
'callback' => 'woo_new_product_tab_content'
);
}
The above codes outputs the full html source instead the image.
Any help will be really appreciated.
Thanks
Here you can:
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
// Adds the new tab
$tabs['desc_tab'] = array(
'title' => __( 'Additional Information', 'woocommerce' ),
'priority' => 50,
'callback' => 'woo_new_product_tab_content'
);
}
function woo_new_product_tab_content() {
// The new tab content
echo '<p>Lorem Ipsum</p>';
}
I know that this thread is old, but I have had the same problem. You can solve it with a custom filter for the tab title.
So you have this:
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
// Adds the new tab
$tabs['desc_tab'] = array(
'title' => __( 'Additional Information <img src="'.$image.'"/>', 'woocommerce' ),
'priority' => 50,
'callback' => 'woo_new_product_tab_content'
);
}
Now you got a tab called "desc_tab". The problem is that WooCommerce does not escape the HTML part of it, but you can use a filter, so WooCommerce translates the tab title to HTML:
add_filter('woocommerce_product_desc_tab_tab_title', 'decode_html_tab', 10, 2);
function decode_html_tab($title, $key) {
$title = html_entity_decode( $title, ENT_QUOTES );
return $title;
}
You have to pay attention to the title of the filter. It is a composition of 'woocommerce_' + the tab title + '_tab_title'.
I hope

Categories